Question

I had googled for a long time to find out the solution but failed in the end.

Here comes my detail problems below:

I have a javascript code written with jQuery lib.

$('<link id="userCSS" rel="stylesheet" href="'+link+'" type="text/css" charset="utf-8">').insertAfter("title");

You can find out that we will dynamically load the CSS file from somewhere else.

And then , because the file generated by someone’s server is different from person to person, there may have a random css segment like this:

body,html {
  background:#000 url(http://i43.tinypic.com/xxxx.jpg) top left no-repeat;
  font-family:Arial,Verdana,sans-serif;
  font-size:12px;
}

So , here comes a problem ! I hope I can trigger the onload event when background image is loaded but I had tried all ways with no hope.

Does anyone have some related experiences with this and give me a hand !? Thanks :]

Answer 1

No example code, but the best I can suggest is to extract the full url in parentheses, then create an image object, set the source to that url, and then bind whatever you action you want to the onload for that image. I’m not 100% it will work, but I believe that the image will only be downloaded once for both the background and your new image object, firing the event at the correct time.

You may need to also use the event.special.load plugin in case the image in the background gets downloaded before the image object is created. Because if that happens, it’ll be coming from the cache which the onload event may or may not handle correctly.