Working on a script that is supposed to preload images by putting them into iframes. When a button is clicked, it will preload even more images and stop previous iframes from loading (no longer needed).
I am receiving two errors though that I cannot figure out:
Resource interpreted as Document but transferred with MIME type image/jpeg
Uncaught TypeError: Cannot read property 'contentWindow' of undefined
The latter error means my script is not fully working so my question is : what's wrong with my code? Here's a 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();
});
The reason I'm using iframes is because I need a way to stop specific images from loading.
Cancel single image request in html5 browsers
EDIT: I think the problem is in how I define image_iframe[]
EDIT2: Gosh forgot that I started my preload at 2
, which means that my loop (which starts at 1) gives an undefined error.