Question

我试图从特定文件夹中加载一组图像（超过1000张图像）并通过更改现有图像的src逐一显示它们

var tid=0;

$("#hdn").load(function() {
    $("#myImg").attr('src',$("#hdn").attr('src'));
    tid = setTimeout(f,300);
    return false;
    });



    var locations = getActualFiles(); // this return an array containing urls of all images in the folder


    var i=0;
    f= function() { 

            $("#hdn").attr('src',locations[i]);
            i++;
            return false;

    };

    f();

此代码工作正常。图像不断变化，但在23次迭代后停止。在加载页面几次并尝试更改代码后，现在它停止在44.png

我尝试将图片加载到浏览器上并且存在。因此，我尝试将此sinppet添加到我的代码中，以便在触发错误时继续执行序列：

$("#hdn").error(function() {
    $("#myImg").attr('src',$("#hdn").attr('src'));
    tid = setTimeout(f,300);
    return false;
    });

但是序列仍停在图像44上并且似乎没有继续。

下面是我的html标记：

  <body style="padding:0;margin:0" bgcolor="#333">
  <img id="hdn" style="display:none" />
  <img id="myImg" />

  </body>

以下是获取所需文件夹中url数组的函数：

  var getActualFiles = function () {
    "use strict";
    var rs = [];
    var nocache = new Date().getTime();
    $.ajax({
        url: '../streaming/returnArray.php?nocache='+nocache,
        data: {'sessid' : "<?=$sessid?>" },
        method: "GET",
        cache:false,
        async: false,
        dataType: "json",
        success: function (response) {
            rs = response;
        }
    });
    return rs;
};

我使用async false，因为如果我不使用它，它会返回一个空数组。也许是因为该文件夹有很多图像？！

Answer 1

由于错误，可能无法加载图像。腐败，不存在等等。因此，检测错误，而不是做一些事情或忽略它。

$("#hdn").load(function() {
    $("#myImg").attr('src',$("#hdn").attr('src'));
    tid = setTimeout(f,300);
    return false;
}).on("error", function () {
    console.log("Could not load image", arguments);
    f(); //load next image        
});

几次迭代后循环停止？

1 个答案: