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

题

我有一个包含许多图像的页面，这些图像最初是从视图中隐藏的（即使用CSS显示：无）的DIVS（即隐藏一些Divs：none）。

因此，当页面加载时，加载所有图像需要年龄，看起来页面很慢（因为浏览器上的加载条在10秒钟以上未完成）。

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

我已经玩过 jQuery Lazyload, 但是，这似乎只有在滚动浏览器时加载图像（对于dabbed Divs不起作用）。

因此，是否有一种方法可以改变这样的工作，还是有更好的方法来做到这一点？

谢谢！

解决方案 6

我以前没有意识到这一点，但是Lazyload确实支持事件触发：

如果有人需要对我的做法进行帮助，请告诉我！

其他提示

也许 jQuery选项卡可以通过Ajax调用选项卡...可以做您需要的事情...

您如何显示隐藏的divs？

一个攻击计划：

与其将图像URL放在IMG标签的SRC属性中，不如将其放置在其他地方（例如，在其上方具有特定类的隐藏跨度）和显示DIV时，请遍历所有IMG标签，然后将SRC设置为URL它应该有。

作为一种方法，肯定有一些弊端。

如果您使用（或可以使用）HTML5 Doctype，则可以使用标签属性的“数据 - ”前缀：

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

然后，您可以使用JavaScript用Data-SRC填充SRC：

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

如果您唯一的目标是“隐藏”由于大量图像而花费了很长时间的进度条，我会选择某种Ajax解决方案，因为这样的方式不会“使用”进度栏。它确实以您想要加载HTML元素的方式（可能是何时）引入了更复杂的。

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

祝你好运！）

我最近尝试了这一点，不得不说，JS再也无法做到了。也许从来没有……像Lazyload这样的项目一直宣布他们会阻止所有图像在启动时加载，但是您可以在Firebug中看到这不起作用。这些图像甚至在Domready上加载了两次，当您开始滚动时...

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

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

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

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

希望有帮助！ :)

编辑：嗯，当我只是答案时，为什么我会得到-1？只需查看带有Lazyload的页面，然后启用Firebug，然后滚动页面。甚至在stackoverflow和懒惰插件的评论中说这是目前唯一的解决方案... :(

许可以下： CC-BY-SA 和归因