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

【问题标题】：Load browser images with javascript event?使用 javascript 事件加载浏览器图像？
【发布时间】：2010-09-15 13:06:08
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

【解决方案1】：

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

如何显示隐藏的 div？

【讨论】：

【解决方案2】：

一个攻击计划：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

祝你好运！ ;)

【讨论】：

【解决方案5】：

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

你唯一的选择是手头上的 ajax 或做这样的事情：

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

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

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

希望对您有所帮助！ :)

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

【讨论】：

【解决方案6】：

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

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

【讨论】：