Question

我有一个页面，里面有几个画廊，包括手风琴和滑块。问题是页面需要永远加载。有没有办法将图像包装在一些代码中或对它应用一个类，以便只在加载其他所有内容后才加载它？

Answer 1

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

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

然后，当您的网页加载时，添加一个javascript行，如下所示：

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

Answer 2

如果你正在使用jQuery（我假设你是这样被标记的那样），请看Lazy Load Plugin for jQuery。它会延迟加载视口外部的图像，直到用户滚动到它们。

2015年更新：此插件在某个时刻被破坏，但现在再次运行。最后的评论同样多，但我几乎错过了，因为它隐藏在倒塌的评论中。

Answer 3

延迟加载图像（和iFrames）的一种简单方法是结合使用纯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/

<强> CODE

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 Library：

<!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>

Answer 4

只在HTML中保留一个图像，以便查看器可以开始使用，然后使用jQuery注入其余部分

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

你也可以使用事件加载器和AJAX或“随时加载”，只需构建一个简单的回调函数，如果它是自动旋转图库或加载点击。

使用jQuery延迟加载图像

4 个答案: