Question

我有一系列包含按顺序编号的图像的文件夹（1.jpg，2.jpg，3.jpg ......等）。我正在尝试使用for循环加载图像，直到找到第一个不存在的图像。我阅读了一些其他文章管理类似的问题（检查图像是否存在）与onload和onerror回调函数，但我卡住了。这里有一些我编写的代码将图像存储在一个数组中，并将它们与src一起显示在HTML页面中：

var arrImages = new Array();

function loadImgSeq() {
    for (var i = 0; i < 11; i++) {
        arrImages[i] = new Image();
        arrImages[i].src = "slides/" + i + ".jpg"
        arrImages[i].width = 400;
        document.body.appendChild(arrImages[i]);
        document.write("<p>"+arrImages[i].src+"</p>");
    }
}

PS：我没有计算机编程经验，我只是做爱好者。

Answer 1

加载后不要记录document.write
不要将append与document.write混合

这是一种方式

var i=0,img;
function loadImgSeq() {
  i++; 
  var img = new Image();
  img.onload=function() {
    document.body.appendChild(img);
    loadImgSeg(); // if success, do it again - will not be called if error
  }
  img.src = "slides/" + i + ".jpg";// IMPORTANT, must be AFTER onload/onerror handler
}

更新：如果您从缓存中获得IE问题，请尝试

img.onload=img.complete=function() {

Answer 2

这是一个：

var found = true;
while(found)
{
    var img = new Image();
    img.src = 'path';
    found = img.naturalWidth?  true : false;
}

Javascript，仅在图像存在时加载图像

2 个答案: