1

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 :]

EragonJ
  • 112
  • 1
  • 8
  • 1
    What are you trying to achieve with this? Pretty sure there is no events for background images but we'll need to know the purpose to suggest something different. – roryf Dec 02 '10 at 17:14
  • It's a little bit hard to explain! Because the server will return a customized css for each user, I have to embed this css inside to check whether this user has his/her customized css or not ! If not , I will set my own background-image for this user , otherwise , I would just use his/her customized background-image instead ! – EragonJ Dec 02 '10 at 17:25

1 Answers1

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.

Mitch Grande
  • 351
  • 1
  • 5
  • Hi Mitch, I know I can just use XHR to get the whole file and process the text by myself to get background image source. But I am still looking for other ways to achieve it and thanks :] – EragonJ Dec 03 '10 at 03:24
  • If you know that the image will always be on the body tag, you could check the .css("backgroundImage") on it every 150ms after you insert the css sheet into the dom. Once that's changed, you know that the styles have been applied and you can extract the new background, also using .css("backgroundImage"). Then, create the new image tag and bind the onload to that. – Mitch Grande Dec 03 '10 at 16:58
  • okok thx Mitch ! You just give me a new way to try ! thanks :P – EragonJ Dec 04 '10 at 16:10
  • I think what Mitch is describing is similar to the accepted answer for this question (including a code example): http://stackoverflow.com/questions/5057990/jquery-background-image-loaded-check – Bungle Mar 06 '12 at 21:22