检查图像系列是否存在，在 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;
};

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

Check if series of images exists, stop when not found in Javascript

javascript

image

same-origin-policy