2

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.

Community
  • 1
  • 1
Gazillion
  • 4,822
  • 11
  • 42
  • 59
  • Just guessing, but your code maintains no reference to each "img" object you create. I would (at least as a quick experiment) check to see if adding some do-nothing reference to "img" *inside* the "onload" callback would make a difference. (Actually I kind-of doubt that would help ...) – Pointy Aug 20 '14 at 20:07
  • I just created an array in my preloadPictures where I push each new Image object once I'm done setting their attributes. It didn't change anything -- was this what you meant? – Gazillion Aug 20 '14 at 20:14
  • 2
    If you could create an example online using jsfiddle, plunk or codepen we can take a look why it is not working. How / When is `preloadPictures` called? How does it not work in Firefox, IE - [what happens and what should happen](https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines#Writing_precise_steps_to_reproduce)? – surfmuggle Aug 20 '14 at 20:19
  • [The code works fine for me in Firefox.](http://jsfiddle.net/zw5fkfrn/) – Pointy Aug 20 '14 at 20:24
  • Thanks for the suggestion @threeFourOneSixOneThree, I created one here: http://jsfiddle.net/yuaond6b/2/ where I get the same problem. I had to tweak the code slightly to make it work (as it didn't like my variable function) but the end result is the same. Works in Chrome but nothing happens in Firefox. – Gazillion Aug 20 '14 at 20:36
  • 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. – Gazillion Aug 21 '14 at 14:23

1 Answers1

4

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!

sifriday
  • 4,342
  • 1
  • 13
  • 24
  • You're a life saver! I had alerted the output of that tidbit and they were quoteless so I have no idea how you figured it out -- it works though so hooray :) – Gazillion Aug 21 '14 at 15:44