程序员经验分享-hwhale

优化图片的javascript预加载

2024-01-07

我想知道是否有人有任何通过 javascript 优化图像预加载的策略？

我正在将 Flash 应用程序移植到 html/css 中，尝试重新创建尽可能接近原始站点的 UI。它本质上是一个照片浏览器应用程序，当用户将鼠标悬停在链接上时会显示高分辨率图像。每页大约有 50-80 张这样的图像。

单独预加载所有图像会导致加载时间明显长于 Flash 应用程序。数据量是相同的，但我必须假设加载时间较长是由于每个图像必须到服务器进行的往返次数所致。

另外，即使在缓存图像之后，我也会发现每个页面的加载时间很长，因为页面仍然需要联系服务器以获取每个图像以接收 304 Not Modified 代码。

有人对加快速度有什么建议吗？尝试创建一个在单个请求中下载的巨大图像精灵，而不是 50-80 个较小的图像，每个图像只需要一个请求，是否有意义？这里的目标是实现与 Flash 站点相似的加载时间。

谢谢。我知道这听起来不是一个理想的做事方式。


正如您所指出的 - 影响现代网页加载时间的最常见因素之一是客户端和服务器之间发送的大量小图像。最近的一些研究表明，对于 20 多个图像，80% 的加载时间将花费在进行如此多次获取的延迟上，而不是实际进行下载！

名为 SmartSprites 的工具是一种非常方便的方法，可以从所有许多小图像中“编译”单个大图像，这将实现更快的加载时间和图像预取。这是链接http://smartsprites.osinski.name/ http://smartsprites.osinski.name/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

flash

Optimization

优化图片的javascript预加载 的相关文章

  • 如何将选定的元素从 devTools 页面发送到 chrome 侧边栏页面

    我正在开发 chrome devTools 扩展 基本上 我在 元素 面板中添加了一个侧边栏窗格 开发工具 js chrome devtools panels elements createSidebarPane ChromeTrast f

  • 为什么我的事件处理程序会导致“不是函数”错误，但可以在 Firebug 控制台中运行？

    使用JQuery 1 2 6 在Firefox 3和IE7上进行测试 我有一些非常基本的 JavaScript 代码来重新加载验证码图像 在我的 JS 文件中 我有 var Captcha count 0 Refresh function

  • 如何从 javascript 错误对象读取错误消息

    有人可以帮我解决以下问题吗 我正在通过 redux 操作进行后调用 如下所示 export const addEmployee firstName surname contactNumber email gt async dispatch

  • 使用非常大的背景位置偏移是否存在性能问题？

    我正在构建一个进度条控件 并且正在研究它实际上并不显示进度 而只是旋转 正在发生某事 的指示器的情况 我的设计基本上是交替的对角条纹 本质上是一个像这样的理发杆 但是 旋转 由于希望将尽可能多的负载转移给渲染引擎 我想为此使用 CSS 过渡

  • 多次训练brain.js？

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN

  • JS文件中的System.register是什么意思？

    在 Angular 2 中使用指令时 JS 文件中的 System register 是什么意思 我认为这个问题并不特定于 Angular2 中的指令 它是关于 ES6 TypeScript 和其他使用 SystemJS 的现代编译器的一般

  • html 图像 src 调用 javaScript 变量

    这是我的代码 我想问 我怎样才能做到这一点 img src img apple 我一直在尝试使用 call 函数和 document onload 但它根本不起作用 有人可以救我吗 我假设你只是想用 javascript 更新图像 src

  • 由于 MIME 类型而导致资源被阻止？

    多年来我已经成功地包含动态创建的 javascript 文件 这是一个例子 https granadainfo com sups php locs 95 https granadainfo com sups php locs 95 正如你所

  • 为动态加载的 HTML 内容触发 Bootstrap JS 行为

    我正在动态加载包含 Bootstrap 标记的 HTML 模板 但是 Bootstrap Javascript 行为不会应用于加载的内容 例如 如果加载的内容包含 Bootstrap 模式的标记 则该模式将无法正确运行 有没有办法可以触发

  • tomcat 7.0.50 java websocket 实现给出 404 错误

    我正在尝试使用 Java Websocket API 1 0 JSR 356 中指定的带注释端点在 tomcat 7 0 50 上实现 websocket 以下是我如何对其进行编码的简要步骤 1 使用 ServerEndpoint注解编写w

  • 如何用 JavaScript 修复图像透视变形和旋转？

    我有一些用手机拍摄的图像 有没有可以拉直纸张照片并将其压平的 JavaScript 库 例如 我想创建一个矩形图像 该图像没有任何失真 换句话说我想知道如何用 JavaScript 修复透视变形和旋转 例如 我发现下面的示例图像来自this

  • Angular UI-Router：多个 URL 到单一状态

    我已经开始使用 Angular 的 ui router 并且我正在尝试弄清楚如何让多个 URL 引用单个状态 例如 orgs 12354 overview retyrns the same pages as org overview 我的

  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用

  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能

  • JavaScript 错误：MVC2 视图中的条件编译已关闭

    我试图在 MVC2 视图页面中单击时调用 JavaScript 函数 a href Select a JavaScript 函数 function SelectBenefit id code alert id alert code 这里 b

  • Javascript等待/异步执行顺序

    所以我试图把我的头脑集中在 Promise await async 上 我不明白为什么当 go 执行时 带有 finished 的警报会紧随 console log coffee 之后 当所有函数都使用等待 承诺时 为什么它只等待 getC

  • 从请求url获取hash参数

    我有这样的网址 http www coolsite com daily plan id 1 http www coolsite com daily plan id 1解析该字符串并读取哈希值 id 之后的值 的最简单方法是什么 谢谢 在客户

  • 如何使用 Javascript OAuth 库不暴露您的密钥？

    看着Twitter OAuth 库 https dev twitter com docs twitter libraries 我看到了这个注释 将 JavaScript 与 OAuth 结合使用时要小心 不要暴露你的钥匙 然后 看着jsOA

  • 根据文本内容从 jquery 对象中过滤元素

    我正在尝试使用contains带有 this 关键字 但它给出了错误 JS function var check ul find li filter function return this contains two css color r

  • 如何使用 jQuery 过滤 DropDownList 中的选项

    我有 2 个 DropDownList 第一个 DropDownList 有 4 个选项 第二个 DropDownList 有 20 个选项 我想要一个选项value 1在第一个 DropDownList 中选择我在第二个 DropDown

随机推荐

  • 在 JavaScript 中分析 JSON 数据

    我并不是说这是一个完全聪明的想法 我认为 理想情况下 大量数据的计算应该在后端完成 但请幽默一下 我正在尝试从 JSON 源中提取视图数据并进行一些分析 给定以下数据源 group satellite 1 data label feed 1

  • 以编程方式更改标签属性

    问题是我需要以编程方式更改标签字体粗细和字体样式 但似乎没有任何效果 这是我到目前为止所尝试的 label FontWeight FontWeight FromOpenTypeWeight 99 对于 label FontStyle 我不知

  • 使用 Python 创建 2 人游戏

    我的朋友向我提出挑战 要求我制作一个我们可以互相对战的流行游戏 战舰 的版本 如果你不了解这款游戏 那其实并不重要 因为对我来说 困难的部分不是制作游戏 而是弄清楚我们如何通过计算机相互对战 我之前制作过同样的游戏 只针对一名玩家 我使用的

  • 如何在rails 4中的单个rails应用程序中访问多个数据库？

    我是 Rails 新手 不知道如何在 Rails 单个应用程序中访问多个数据库 我会这样尝试 配置 数据库 yml default default adapter mysql2 encoding utf8 pool 5 username r

  • R：按字母数字对数据框进行排序

    我有一个数据框 它存储每个模型的计数值 型号名称是字母数字 然后 我使用 ggplot2 生成条形图 其中 x 轴为模型 y 轴为计数 我想订购我的 x 轴 x 轴在数据框中和图中的 x 轴中显示如下 我想对其进行正确排序 例如 M 1 M

  • 如何强制将一段文本设置为“direction rtl”段落内的“direction ltr”

    因此 电话号码始终是ltr 从左到右 在多语言网站上工作时 我需要在具有方向 rtl 的文本段落中插入电话号码 带有 前缀和用 分隔的数字 当然对于相关语言 所以我有这样的事情 ltr test direction ltr rtl test

  • cout 和 printf 适用于内置调试而非发布的 Dll

    我构建了一个 DLL 通常通过 SetWindowHookEx 注入到控制台应用程序中 DLL 将信息输出到控制台非常重要 我一直在使用 std cout 执行此操作 DLL 已接近完成 直到我尝试在发布模式下构建 DLL 这使得所有 co

  • 调试 C 代码

    有人可以告诉我我的代码有什么问题以及为什么它会产生这个输出 Code int main unsigned num char response do printf Please enter a positive integer greater

  • 禁用属性的正确值是多少？

    的正确值是多少disabled文本框或文本区域的属性 我以前见过使用以下内容

  • 如何根据环境实现cucumber场景不同的数据

    我在不同环境中执行 cucumber jvm 场景时遇到问题 场景的特征文件中包含的数据属于一个环境 为了在不同的环境中执行场景 我需要根据要执行的环境更新功能文件中的数据 例如 在以下场景中 我将搜索条件包含在功能文件中 搜索条件对于 Q

  • Objective-C - 弱属性 - getter autoreleases（自动引用计数）

    我有疑问weakARC 中的属性 自动引用计数 我的理解 如有错误请指正 weak属性的行为类似于assign属性 但当该属性指向的实例被销毁时 ivar 会指向 nil 问题 我只是觉得吸气剂weak属性保留和自动释放 它不是应该像 ge

  • 动态添加的表行不会触发单击事件

    我有一个空表 我使用以下方法通过 jQuery 添加行 table gt tbody last append tr td symbol Code1 td td symbol Code2 td td symbol Code3 td tr 一切

  • 将基于类的组件转换为钩子（gapi API）

    我有这个基于类的组件 使用gapi Google Auth API来呈现按钮并且它可以工作 import React from react class GoogleAuth extends React Component state isS

  • 正确关闭 ActiveMQ 和 Spring DefaultMessageListenerContainer

    当 Tomcat 管理器发出 停止 命令时 我们的系统不会关闭 我已确定与ActiveMQ Spring有关 我什至已经弄清楚如何让它关闭 但是我的解决方案是一个黑客 至少我希望这不是 正确 的方法 我想知道关闭 ActiveMQ 的正确方

  • 如何正确更改MaterialAlertDialog文本颜色？

    我尝试仅使用 Material Components 中的小部件 但在许多情况下 没有记录如何实现样式 让我们考虑一下MaterialAlertDialog 每次我想显示一个对话框时 我都会调用这部分代码 MaterialAlertDial

  • Scanf/Printf 双变量 C

    假设我有以下 C 代码 double var scanf lf var printf lf var printf f var 它从标准输入变量 var 读取 然后在标准输出 var 中打印两次 我知道这就是您从标准输入读取双变量的方式 但我

  • Tensorflow表查找int->float

    给定一个包含整数 代表类 的未知维度 的 2D 张量 我想获得一个相同形状的新张量 但用从查找表中获取的浮点数替换值 代表类权重 例如 inputs 1 3 3 2 4 2 lookup table 1 0 2 2 0 25 3 0 1 4

  • OS X 安装 Sphinx：找不到“sphinx-build”和“sphinx-quickstart”

    关于这个主题 有几个 未答复 的帖子 涉及找不到 sphinx build 在 Mac 操作系统中找不到 sphinx build h 命令 https stackoverflow com questions 24582037 locati

  • 包含流中包含 JSF 标签/组件的动态内容

    我正在开发一个应用程序 我想在其中包含来自流的动态 XHTML 内容 为了处理这个问题 我编写了一个标记处理程序扩展 它将动态 XHTML 内容转储到输出组件 如下所示 UIOutput htmlChild UIOutput ctx get

  • 优化图片的javascript预加载

    我想知道是否有人有任何通过 javascript 优化图像预加载的策略 我正在将 Flash 应用程序移植到 html css 中 尝试重新创建尽可能接近原始站点的 UI 它本质上是一个照片浏览器应用程序 当用户将鼠标悬停在链接上时会显示高

热门标签