javascript - 使用 javascript 事件加载浏览器图像？

Question

我有一个包含很多图像的页面，这些图像最初在我使用选项卡式 div 时从视图中隐藏（即使用 CSS display:none 隐藏一些 div）。

因此，当页面加载时，加载所有图像需要很长时间，这看起来页面很慢（因为浏览器上的加载栏没有完成 10 多秒）。

我想要一种在页面上可见之前不加载图像的方法。

我玩过jQuery LazyLoad，但是这似乎只在滚动浏览器时加载图像（这不适用于选项卡式 div）。

因此，有没有办法改变 LazyLoad 以像这样工作，或者有更好的方法吗？

谢谢！

score 0 · Accepted Answer

如果您正在使用（或可以使用）HTML5 文档类型，则可以对标签属性使用“data-”前缀：

<img src="" data-src="/path/to/image" style="display: none" />

然后你可以使用 Javascript 用 data-src 填充 src：

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));

score 0 · Accepted Answer

我以前不知道这一点，但 LazyLoad 确实支持从事件触发：

如果有人需要我如何做到这一点，请告诉我！

score 0 · Accepted Answer

也许jQuery Tabs可以做你需要的，通过标签上的 ajax 调用......

你如何显示隐藏的 div？

score 0 · Accepted Answer

攻击计划之一：

不要将图像 URL 放在 img 标签的 src 属性中，而是将其放在其他位置（例如，在其上方具有特定类的隐藏跨度），当显示 div 时，遍历所有 img 标签并将 src 设置为 URL它应该有。

作为一种方法，它肯定有一些缺点。

score 0 · Accepted Answer

如果您唯一的目标是“隐藏”由于大量图像而需要很长时间的进度条，我会选择某种 AJAX 解决方案，因为这样进度条就不会“使用”。它确实会在您希望加载 HTML 元素的方式（以及可能的时间）方面引入更多复杂性。

我个人不喜欢将 HTML 属性用于其原始目的以外的任何用途，因此将路径存储在另一个属性中并在需要时进行切换不是我的首选。相反，我会尝试创建一个 JavaScript 数组（id => 路径）并在需要时更新单独的 HTML IMG 元素。

祝你好运！;)

score 0 · Accepted Answer

我最近尝试过，不得不说这在 js 中是不可能的了。也许从来没有......像lazyload这样的项目一直宣称他们会在启动时停止加载所有图像，但你可以在firebug中看到这不起作用。图像甚至加载了两次，在 domready 和当你开始滚动时......

您唯一的选择是手头上的 ajax 或执行以下操作：

<img src="transparent.gif" alt="" rel="real image source" />

然后在 div 变得可见时切换属性，因此图像开始加载。

至少如果您不需要谷歌索引它们，这也可以正常工作。

希望有帮助！:)

编辑：嗯，为什么我刚刚给出答案时得到-1？只需查看带有延迟加载的页面并启用 firebug，然后滚动页面即可。甚至在stackoverflow和lazyload插件的评论中都说这是目前唯一的解决方案...... :(

6 回答 6