Question

我有一个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张图片，浏览器卡住了这么多图像。从第一步开始，如何加载下一张图像，然后从第二步开始，加载下一张图像等等？

由于

Answer 1

您可以使用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页面的末尾。

从下两个div加载图像

1 个答案: