有没有办法（JavaScript 或 jQuery）顺序加载图像（防止并行下载）

Question

我有一个包含十几张大图的页面：

<div id="gallery">
  <img src="1.png" alt="" />
  <img src="2.png" alt="" />
  ...
</div>

由于图像的大小，并行下载会导致延迟过长。

问题：如何顺序加载图片，让2.png在1.png完全加载并显示后才开始加载？

• 我不想要延迟加载（除非你知道一个插件，它总是以相同的顺序加载图像，而不管当前视口如何）

  李>

• 此解决方案：Loading images sequentially 在最新的 Chrome、Firefox、IE 中对我不起作用。它将一次加载所有图像，然后显示它们

• 这个答案https://stackoverflow.com/a/25774333/525445 中建议的插件有点功能，但它一次发出 2、3 甚至更多请求，所以没有做它应该做的事情

• 然后是这个插件，也在一些答案中提出：http://imagesloaded.desandro.com/ 虽然它是为了别的东西 - 让你知道什么时候加载了所有图像，它做得很好。所以我试着像这样使用它：

  var $gallery = $("#gallery");
  $gallery.imagesLoaded（函数（）{ $gallery.append(''); console.log("图片加载"); }); $gallery.append('');

这里的想法是 - 在 imagesLoaded 事件上动态添加图像。但是，它只会在第一张图片上触发（尽管它也是动态添加的），而第二张则不会。所以上面的代码导致两个图像都显示，但只有 1 个 console.log() 通知

任何建议表示赞赏。

Answer 1

基本上你想从一个空容器开始。图像的路径将包含在一个 Javascript 数组中，然后使用屏幕外元素加载方法一个接一个地引入。代码：

<div id="gallery"></div>
  
<script>
var images = [
    { src: '1.png', alt: 'I am the first image' },
    { src: '2.png', alt: 'Second image' }
];

function loadImageSequentially(imagesArray, appendTo, loadImageAtIndex) {
    if (!loadImageAtIndex) loadImageAtIndex = 0; // assume first loading if not provided.
    if (!imagesArray[loadImageAtIndex]) return;

    var img = new Image();

    // attach listeners first
    img.onload = function() {
        appendTo.appendChild(img);
        loadImageSequentially(imagesArray, appendTo, loadImageAtIndex + 1);
    }
    img.onerror = function() {
        // remove listeners
        img.onload = img.onerror = null;
        img.src = 'error.png'; // if you have a placeholder error png to display, put it here.

        // life goes on...
        appendTo.appendChild(img); 
        loadImageSequentially(imagesArray, appendTo, loadImageAtIndex + 1);     
    }

    // assign attributes, which will start the loading.
    img.src = imagesArray[loadImageAtIndex].src;
    img.alt = imagesArray[loadImageAtIndex].alt;
}

// now run it.
var appendTo = document.getElementById('gallery')
loadImageSequentially(images, appendTo);
</script>

这个例子可以模块化并做得更好。但是为了说明的目的而留在这里。

Answer 2

尝试在页面滚动时使用延迟加载。当用户滚动到该位置时，它开始加载图像，因此图像不会并行加载，而是以某种方式依次顺序加载。