通过 iframe 错误预加载图像答案

【问题标题】：Preloading images through iframes error通过 iframe 错误预加载图像
【发布时间】：2014-06-23 11:22:12
【问题描述】：

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

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

资源解释为文档，但使用 MIME 类型传输图片/JPEG
未捕获的类型错误：无法读取属性“contentWindow”的未定义

后一个错误意味着我的脚本没有完全工作，所以我的问题是：我的代码有什么问题？这是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： 天哪，我忘记了我在 2 开始预加载，这意味着我的循环（从 1 开始）给出了一个未定义的错误。

【问题讨论】：

标签： javascript jquery image caching iframe

【解决方案1】：

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

自行修复

未捕获的类型错误：无法读取未定义的属性“contentWindow”

我从预加载中的数组 2 开始，但从 1 开始循环

【讨论】：