检查是否存在一系列图像，在Javascript中找不到时停止

Question

我想在我的网站上展示一系列以结构化方式命名的动态加载图像。图像位于不同的域中，这导致Same Origin Policy限制。我不能使用$.ajax。

我用www.example.com/Images/img-1.jpg、www.example.com/Images/img-2.jpg之类的计数器来构建我的url，它会。。。

我试过类似帖子中的其他几个答案，但都没能奏效。要么循环永远运行，要么它永远找不到图像，即使它们存在于路径中。

第一次尝试：

ShowImages: function () {   
    var urlBase = 'http://www.example.com/Images/img-';
    var i = 1;
    while (true) {
        var url = urlBase + i + '.jpg';     
        var imgDom = new Image();
        imgDom.onload = function () {
            alert('worked');
            i++;
        };
        imgDom.onerror = function () {
            return; // I want to either break the while loop, or return from ShowImages function
        };
        imgDom.src = url;
    }
},

它从未达到.onerror。

第二次尝试：

ShowImages: function () {   
    var urlBase = 'http://www.example.com/Images/img-';
    var i = 1;
    while (true) {
        var url = urlBase + i + '.jpg';     
        var imgDom = document.createElement("img");
        $(imgDom).attr('src', url);
        if (imgDom.complete) {
            alert('worked');
            i++;
        } else {
            break;
        }
    }
},

它从未击中.complete。

Answer 1

尝试您的第一个选项（您基本上需要将它们连锁）

ShowImages(1);
ShowImages: function (counter) {   
    var urlBase = 'http://www.example.com/Images/img-';
        var url = urlBase + counter + '.jpg';     
        var imgDom = new Image();
        imgDom.onload = function () {
            alert('worked');
            ShowImages(counter+1);
        };
        imgDom.onerror = function () {
            alert("all images done..");
            return; // I want to either break the while loop, or return from ShowImages function
        };
        imgDom.src = url;
};