在大多数现代浏览器中，你如何使用Jquery延迟加载图像？

我正在寻找一个支持延迟加载图像的JQuery插件。不再支持Lazy Load JQuery插件，但在Firefox中不起作用。

有没有人知道支持大多数现代浏览器的好选择？

我也对其他方法持开放态度。我有一个隐藏的div与图像，我不想加载，除非div是可见的。让我知道在这种情况下是否有更好的方法来推迟图像负载。

我在标签页样式页面中遇到类似情况，其中最初不可见标签中的内容不必要地下载。我使用的解决方案是创建标记，如：

然后在处理选项卡转换的javascript中，我还将“data-src”属性替换为这些图像的“src”属性。

 $thisTab.find('img[data-src]').each(function(img) { var $img = $(img); $img.attr('src', $img.attr('data-src')) .removeAttr('data-src'); });

这实现了仅在选择选项卡时加载图像的目标，并且是有效的html5！

我有一个问题，它也没有在FF工作，但我得到它工作，当我用图像填写初始src属性值，像Monsieur Tuupola在这个示例页面上做的，他使用1px x 1px灰色gif占位符的图像：

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

在FF中开火，它会起作用。

我知道开发人员说它不起作用，但我现在正在项目中使用LazyLoad，它在FF中工作正常（我使用的是Firefox 4）。下载和设置大约需要24秒，所以试试看它是否适合你:)

有一个很好的轻量级jquery插件 – imgr。点击这里https://github.com/agaase/imgr 。

它具有以下主要特征 –

其移动优化; 所以它也应该适用于移动浏览器。
它支持普通图像元素和带背景图像的元素。
您可以在滚动时执行延迟加载的图像，也可以在加载页面后加载所有图像。

在此找到此解决方案

 List of 10 alberts
 
 Loading ....

   ......................................................................... $('img[data-src]').each(function() { $(this).attr('src', $(this).attr('data-src')).removeAttr('data-src'); });

我很确定Javascript有点矫枉过正，有点倒退（特别是如果在脚本上没有defer=""属性的情况下使用jQuery），因为javascript需要时间来解析和执行。相反，使用decoding属性设置为async，如此。

另外，我假设你想要延迟加载图片的最可能原因是让你的网站加载速度更快。如果是这种情况，那么只需将图像转换为jpeg并使用compress.io / JPEGmini压缩它们（将上传的jpeg文件上传到两者并使用压缩后的较小者），即可使网站加载量更大。。

接下来，虽然尚未在所有浏览器中提供完全支持，但越来越多的浏览器开始支持它。我更喜欢采用实用的方法使我的网站充满快速的新function，并在我的网站增长更快的同时使用更多支持的浏览器，而不是花费大量时间使我的网站在旧的过时浏览器上快速加载只是为了容纳一小部分真正应该更频繁更新浏览器的用户。

我刚刚创建了一个使用jQuery.Lazy的例子，以另一种方式解决这个问题，然后看到这些问题有点老了。 ;）

但是没关系，现在我想告诉你我的解决方案，即使对于其他想做这样事情的人也是如此。

此示例在第一个视图中看起来很大，但它主要是示例结构的创建。最.update()行是插件上的.update()调用。

 lazy.update();

更改选项卡后，我们强制插件通过此行更新视图。其他一切都是自动管理的。非常容易的imo。

工作示例可以在下面找到。如果你喜欢玩它，我也创造了一个jsFiddle 。

 // create a lazy instance var lazy = $("img").lazy({ chainable: false, visibleOnly: true, appendScroll: $("https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#content div"), // below config is just for demo purpose threshold: 0, afterLoad: function(e) { var image = e.attr("src").match(/tab\+(.*)\: image (\d)/g)[0]; console.log(image.replace("+", " ").replace("%20", " ")); } }); // your tab controller $("https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#header li").click(function() { $("https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#content div").hide().eq($(this).index()).show(); // update lazy instance after tab change manually lazy.update(); });

 html * { margin: 0; padding: 0; } ulhttps://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#header { list-style: none; margin: 10px 10px 0; } ulhttps://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#header li { display: inline-block; background: https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#000; color: https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#fff; padding: 4px 10px; margin-right: 10px; } ulhttps://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#header li:hover { cursor: pointer; color: https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#f00; } divhttps://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#content div { display: none; width: 520px; height: 350px; overflow: auto; background: https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#ccc; padding: 10px; border: 1px solid https://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#000; margin-left: 10px; } divhttps://stackoverflow.com/questions/5582739/how-do-you-lazy-loading-images-with-jquery-in-most-modern-browsers/#content div img { width: 500px; height: 200px; margin-bottom: 10px; }