为什么我的图片加载在Firefox和Internet Explorer中无法启动？

Question

I'm trying to detect when a few images are done loading using the solution found here

The solution works wonderfully in Chrome and Safari but fails (without error) in both Firefox and IE.

The preloading function is the following:

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 by creating an array from the background images of a few divs. The function loadSlides is called when the document is ready. Once all pictures are loaded my slider's controls are told to fade in.

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 alert the pictures variable 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

I tried a few other solutions in the thread linked above but none seem to have worked. I tried the jQuery solution, setting img.src = ''; prior to setting the actual source but nothing happens.

Any help is appreciated.

Edit: I created the following jsfiddle: http://jsfiddle.net/yuaond6b/2/

I get the same problem with that script as it works in Chrome but does nothing in Firefox. I had to modify the script as for some reason jsfiddle didn't like my variable function but the result is the same.

Edit 2: If I add an "onerror" function to my img it gets triggered. Unfortunately I've tried to extract the message from these errors and can't seem to figure out exactly how it works.

Answer 1

Firefox is breaking because the line of code:

var bg = jQuery(this).css('background-image');

is returning the URL with quotes:

url("https://i.imgur.com/fTb97EO.jpg")

whereas in Chrome it returns it without quotes:

url(https://i.imgur.com/fTb97EO.jpg)

You then strip the url( and the ) which works fine in Chrome, but it means in Firefox the string bg has additional quotes around it. This means when you set the src attribute, Firefox converts those extra quotes to %22 and then doesn't recognise the URL and attempts to load a local path. Here is what Firefox tries to load when run in jsfiddle:

http://fiddle.jshell.net/yuaond6b/4/show/%22https://i.imgur.com/S1OPVB6.jpg%22

The solution is to strip the " in Firefox, but not in Chrome, using a regexp:

bg = bg.replace(/url\(["]*/,'').replace(/["]*\)/,'');

as shown here:

http://jsfiddle.net/yuaond6b/6/

This works OK in both Chrome and Firefox!