如何一张一张地加载图片？答案

【问题标题】：How can I load images one after another?如何一张一张地加载图片？
【发布时间】：2015-12-23 11:48:40
【问题描述】：

我有一个网站，里面有很多图片。我想先加载一些图像（因为用户会滚动到最后一张图像）。假设这是 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 加载后开始加载？

【问题讨论】：

标签： javascript html image image-processing

【解决方案1】：

我完全同意 Steve Testa 的回答 - Mike Tupola 的 jQuery 插件是所谓的“延迟加载”的最佳插件之一 - 但是，我最近偶然发现了对该插件的重大改进。正如史蒂夫所提到的，Mike Tupola 的插件只适用于图像。幸运的是，这个插件叫做 LazyLoadAny - 它允许你延迟加载任何你想要的东西：https://github.com/emn178/jquery-lazyload-any

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

【讨论】：

【解决方案2】：

快速谷歌搜索（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')">

...等等等等。

【讨论】：

【解决方案3】：

我更喜欢一个更轻量级的插件，它可以在没有 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 像素，然后才会在视口中可见。

【讨论】：

【解决方案4】：

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

【讨论】：