Question

我有一个网站，里面有很多图片。我想要一些图像加载到另一个之前（因为用户将滚动到最后的图像）。让我们说这是html：

<img src='img1.jpg'>
<img src='img2.jpg'>
<img src='img3.jpg'>
<img src='img4.jpg'>

如何在img3.jpg和img4.jpg加载后开始加载img1.jpg和img2.jpg？

Answer 1

我完全同意Steve Testa的回答 - Mike Tupola的jQuery插件是所谓的“Lazy Loading”中最好的插件之一 - 但是，我最近偶然发现插件的一个重大改进。史蒂夫提到，Mike Tupola的插件仅适用于图像;幸运的是，这个插件名为LazyLoadAny - 它允许你懒得加载任何你想要的东西：https://github.com/emn178/jquery-lazyload-any

我最近在产品列表页面上使用了这个页面，其中客户端没有分页但不希望它们全部立即加载 - 它是一个很好的资源并且易于使用。如果您需要进一步解释，请询问。

Answer 2

我更喜欢使用更轻量级的插件来加载没有overhead of jQuery的图片。

justlazy库提供自动延迟加载图像：

1。定义占位符：

<span data-src="img1" data-alt="some alt text 1"
      class="justlazy-placeholder">
</span>

<span data-src="img2" data-alt="some alt text 2"
      class="justlazy-placeholder">
</span>

2. ：通过javascript初始化延迟加载：

Justlazy.registerLazyLoadByClass("justlazy-placeholder");

插件会在用户可见时加载图片。如果他们应该提前加载，您可以提供一个阈值：

Justlazy.registerLazyLoadByClass("justlazy-placeholder", {
    threshold: 200
});

现在特定图像将在视口中可见之前加载200像素。

Answer 3

快速谷歌搜索（http://www.cryer.co.uk/resources/javascript/script3.htm，页面有示例）提供了在上一张图片加载完成后加载另一张图片的功能：

<script type="text/javascript">
var loadingImage = false;

function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;

  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>

然后使用

<img name="image0" onLoad="LoadImage('image1','number1.gif')">
<img name="image1" onLoad="LoadImage('image2','number2.gif')">

......依此类推。

Answer 4

您可能需要使用javascript强制执行延迟加载方案。我个人是Mike Tupola's jquery plugin的忠实粉丝。只有在图像可见时才会加载图片。这样，如果用户从不向下滚动任何不可见的图像将永远不会加载。

如何一个接一个地加载图像？

4 个答案: