I am trying to detect when multiple images are loaded using the solution found here
The solution works fine in Chrome and Safari, but it doesn’t work (without errors) in both Firefox and IE.
The preload function is as follows:
var preloadPictures = function(pictureUrls, callback) {
var i,
j,
loaded = 0;
for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback();
}
};
img.src = src;
} (new Image(), pictureUrls[i]));
}
};
And I use it, creating an array from the background images of several divs. The function loadSlidesis called when the document is ready. Once all the snapshots have been uploaded, my sliders controls will disappear.
function loadSlides() {
if( jQuery('#frontpage-slider')[0] ) {
var pictures = [];
jQuery('#frontpage-slider .slide').each(function() {
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','');
pictures.push( bg );
});
preloadPictures( pictures, function() {
jQuery('.slide-controls').css('visibility','visible').hide().fadeIn('slow');
} );
}
}
If I warn the variable pictures, I get an array with the following values, so I don't think my problem has anything to do with the values.
http://foo.bar/content/user_files/2014/08/test-2.png
http://foo.bar/content/user_files/2014/08/test-1.png
, , , , . jQuery, img.src = ''; , .
.
: jsfiddle: http://jsfiddle.net/yuaond6b/2/
script, Chrome, Firefox. script, - jsfiddle , .
2: "onerror" img, . , , .