使用 jQuery 延迟图像加载答案

【问题标题】：Delay image loading with jQuery使用 jQuery 延迟图像加载
【发布时间】：2010-05-24 14:13:30
【问题描述】：

我有一个包含多个画廊的页面，包括手风琴和滑块。问题是页面需要永远加载。有没有一种方法可以将图像包装在一些代码中或对其应用一个类以强制它仅在其他所有内容加载后才加载？

【问题讨论】：

【解决方案1】：

当然可以。用“#”替换你的 img src 属性，并添加一个自定义属性，如下所示：

<img src="#" data-delayedsrc="/img/myimage.png" />

然后，在页面加载时添加一个 javascript 行，执行如下操作：

$('img').each(function(){
  $(this).attr('src', $(this).data('delayedsrc'));
});

【讨论】：

狡猾，这可能正是我所需要的。
您可能需要将其设为空白.gif 而不是 # 以使 IE 满意，但它应该可以工作。
您可以改用 HTML 数据属性。
这是最快的方法吗？我正在处理 400 个缩略图，但浏览器有点困难。
只选择带有delayedsrc属性的图像标签会不会有一点改进，所以不会不必要地循环遍历所有图像元素？ IE。 $('img[delayedsrc]').each(function(){

【解决方案2】：

如果您使用的是 jQuery（我假设您是这样标记的），请查看 Lazy Load Plugin for jQuery。它会延迟加载视口之外的图像，直到用户滚动到它们为止。

2015 年更新：此插件曾一度损坏，但现在可以再次使用。最后一条评论说了这么多，但我几乎错过了它，因为它隐藏在折叠的 cmets 中。

【讨论】：

它会显示技术上仅在视口内被遮挡的图像吗？
测试它并找出:-) 它是一个非常易于使用的插件。
不幸的是，不再支持该插件 - （来自该站点）“延迟加载当前不可用。它不能按预期与最新的浏览器一起使用。我目前没有时间自己更新代码. 补丁总是受欢迎的。如果你找到解决方案，只需 fork 并发送请求请求。谢谢！"
@DCD、@Erik、@Mark、@David -- 有没有人知道延迟加载的任何替代方法实际上有效？
这个库现在有一个更新版本，可以在当前浏览器上使用。

【解决方案3】：

延迟加载图像（和 iFrame）的一种简单方法是结合使用纯 JS、jQuery.data() 和自定义 HTML5 data-* 属性。图像的 src 最初可以指向加载的 GIF。 data-* 属性包含您最终要加载的图像的 URL 路径。纯 JS 设置延迟（下例中为 3000 毫秒），然后执行 jQuery.data()，将图像的 src 设置为预期图像。

下面的示例使用 class="load-delay" 对每个图像执行。

现场示例：http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/

代码

JS 和 jQuery：

$(document).ready(function () {
  setTimeout(function () {
    $('.load-delay').each(function () {
      var imagex = $(this);
      var imgOriginal = imagex.data('original');
      $(imagex).attr('src', imgOriginal);
    });
  }, 3000);
});

HTML 和 jQuery 库：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="utf-8" />

</head>
<body>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>

【讨论】：

这样可以完美地消除任何“延迟加载”插件或类似插件，非常适合不涉及滚动的单页网站，可以这么说，所有交互都发生在首屏。非常感谢！

【解决方案4】：

在 HTML 中只保留一张图片，以便查看者可以开始使用，然后使用 jQuery 和

注入其余图片

$(document).ready(function() {
    //load rest of the images
});

您还可以使用事件加载器和 AJAX 或“按需加载”，只需构建一个简单的回调函数，如果它是自动旋转画廊或点击加载。

【讨论】：