Question

处理应该通过将图像放入iframe来预加载图像的脚本。单击按钮时，它将预加载更多图像，并停止加载之前的iframe（不再需要）。

我收到两个错误，但我无法弄清楚：

资源被解释为文档但以MIME类型传输图像/ JPEG
未捕获的TypeError：无法读取属性＆＃39; contentWindow＆＃39;的未定义

后一个错误意味着我的脚本没有完全正常工作，所以我的问题是：我的代码出了什么问题？这是jsfiddle

 function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        image_iframe[this] = $('<iframe />').appendTo('body')[0];
        image_iframe[this].onload = function() {
            console.log('Image Cached!');
            this.remove();
        };
        image_iframe[this].src = image_url[this];
    });
}

var image_iframe = [];
var image_url = []; 

image_url[1] = '/image.jpg';
image_url[2] = '/another-image.jpg';
image_url[...] = 'etc';

preload([2, 3]);
var current_url = 1;

function nextImage() {
    if( current_url <= 50) {
        current_url = current_url + 1;
        preload([current_url + 1, current_url + 2]);
        for (var z=1;z<current_url;z++) {
            image_iframe[z].contentWindow.stop();
            image_iframe[z].execCommand("Stop", false);
        }
    } else {
        window.location.replace("/");
    }
}

$('#remove').click(function(){ 
    nextImage();
});

我使用iframe的原因是因为我需要一种方法来停止加载特定图像。
Cancel single image request in html5 browsers

编辑：我认为问题在于我如何定义image_iframe[]
EDIT2： Gosh忘了我在2开始预加载，这意味着我的循环（从1开始）给出了一个未定义的错误。

Answer 1

资源解释为文档但使用MIME类型image / jpeg
传输

修正了自己

未捕获的TypeError：无法读取属性＆＃39; contentWindow＆＃39;未定义的

我在预加载中从数组2开始，但是从1

循环

通过iframes错误预加载图片

1 个答案: