Why is my image onload not firing in Firefox and 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)

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!