Javascript 从下两个div加载图像

我有一个impress.js幻灯片文件，其中包含以下内容：

<div id="impress">
    <div class="step image" data-x="-1000" data-y="-1500" data-scale="1" data-content-duration="10000" data-content="image">
        <img class="backgroundImage" src="content/images/wallpaper-1013331.jpg" />
    </div>

    <div class="step image" data-x="920" data-y="-1500" data-scale="1" data-content-duration="10000" data-content="image">
        <img class="backgroundImage" src="content/images/wallpaper-1617202.jpg" />
    </div>

    <div class="step image" data-x="2840" data-y="-1500" data-scale="1" data-content-duration="10000" data-content="image">
        <img class="backgroundImage" src="content/images/wallpaper-1654260.jpg" />
    </div>

....
</div>

....

但我有30张图片，浏览器被这么多图片卡住了。如何从第一步加载下一个图像，然后从第二步加载下一个图像，依此类推

---

谢谢

您可以用Javascript加载图片并使用如下递归：

var arrayImg = { };
arrayImg[0] = { idImgElement: "id1", url: "url1" };
arrayImg[1] = { idImgElement: "id2", url: "url2" };
arrayImg[2] = { idImgElement: "id3", url: "url3" };
function loadImage(it) {
   "use strict";
   if (arrayImg[it]) {
      var imgObj = new Image();
      imgObj.src = arrayImg[it].url;
      imgObj.onload = function() {
         document.getElementById(arrayImg[it].idImgElement).src = this.src;
         loadImage(it + 1);
      }
   }
}
loadImage(0);

---

将此脚本写在html页面的末尾。

谢谢您的回答。我采取了不同的方法。我使用数据属性data src=“path/to/image”，并在impress.js事件的帮助下，将路径图像放入src img属性中。主旨：