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

CodeVirtuoso 发表于 Dev

CodeVirtuoso

我的页面包含许多大图像：

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

由于图像的大小，并行下载会导致太长的延迟，然后才显示任何内容。

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

我不想延迟加载（除非您知道一个插件，无论当前视口如何，该插件始终严格按照相同的顺序加载图像）
解决方案：在我最新的Chrome，Firefox，IE中，依次加载图像对我不起作用。它将立即加载所有图像，然后显示它们
这个答案中建议的插件https://stackoverflow.com/a/25774333/525445可以正常使用，但是它一次发出2个，3个或更多请求，因此不执行应有的功能
然后是这个插件，在某些答案中也提出了该插件：http : //imagesloaded.desandro.com/但这是出于其他目的-让您知道何时加载所有图像，效果很好。所以我试着像这样使用它：

var $ gallery = $（“＃gallery”）;
$ gallery.imagesLoaded（function（）{$ gallery.append（''）; console.log（“已加载图片”）;}）; $ gallery.append（''）;

这里的想法是-在imagesLoaded事件上一个接一个地动态添加图像。但是，它仅针对第一个图像触发（尽管它也是动态添加的），而对于第二个图像则不会触发。因此，上面的代码导致两个图像都显示，但是只有1个console.log（）通知

任何建议表示赞赏。

加尔文特

基本上，您想从一个空容器开始。图像的路径将包含在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 the onload listener
        img.onload = null;
        img.src = 'error.png';

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