使用jQuery延迟加载图像

Question

使用jQuery延迟加载图像

29

我有一个页面，其中包含多个图库，包括手风琴和幻灯片。问题是该页面加载需要很长时间。是否有一种方法可以将图像包装在一小段代码中或应用类来强制它在其他所有内容加载完成后才进行加载？

您可以使用“lazy-loading”技术来解决这个问题。这种技术允许只在用户滚动到它们时再加载图像。您可以通过为每个图像元素添加“loading=lazy”属性来实现这一点，或使用JavaScript库来更好地控制延迟加载。例如，您可以使用像Lazysizes或Lozad.js这样的库来延迟加载整个页面上的所有图像。

- DCD

4个回答

8

如果你正在使用jQuery（我认为你是这样做的，因为它被标记为这样），请查看{{link1：Lazy Load Plugin for jQuery}}。它会延迟加载在视口之外的图像，直到用户滚动到它们。

更新2015年：此插件曾经出现故障，但现在已经可以正常工作。最后一条评论说了这一点，但我几乎错过了它，因为它被隐藏在折叠的评论中。

- David Lantner

它会显示那些技术上在视口内但被遮挡的图片吗？ - DCD

测试一下，找出答案 :-) 这是一个非常易于使用的插件。 - Erik

5

那个插件很不幸已经不再得到支持了 - （来自网站）“懒加载目前无法使用。它不能像预期的那样与最新的浏览器兼容。我目前没有时间更新代码。欢迎提交补丁。如果您找到解决方案，请分叉并发送一个拉取请求。谢谢！” - Mark Steudel

@DCD，@Erik，@Mark，@David -- 有人知道任何实际可行的懒加载替代方案吗？ - Drew Noakes

现在有一个更新的版本的这个库，可以与当前的浏览器一起使用。 - Chris Bloom

6

一种延迟加载图像（和iFrames）的简单方法是使用纯JS、jQuery.data()和自定义HTML5 data-*属性的组合。图像的src最初可以指向一个loading 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>

- seandebutts

这个技巧非常好，没有任何“懒加载”插件或类似的东西，非常适合单页站点，没有滚动条，所有交互都在屏幕上方进行。非常感谢！ - Systembolaget

1

在HTML中只保留一张图片，以便观众有一个起点，然后使用jQuery注入其余的图片。

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

你也可以使用事件加载器和 AJAX 或者 "边加载边展示"，只需构建一个简单的回调函数，如果是自动旋转画廊或点击加载。

- Tumharyyaaden

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jerod Venema · Accepted Answer

当然可以。将img src属性替换为“＃”，并添加自定义属性，就像这样：

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

然后，在页面加载时添加一行JavaScript代码，执行以下操作：

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