easy way to tell when a background image of a div has finished loading?

[Chris27]

With img elements you can check the complete attribute. Is there an easy way to do something similar with a div?

 

[Shilohen]

With img elements you can check the complete attribute. Is there an easy way to do something similar with a div?

None that I know of, sorry. I guess you could create an IMG element with the same src as the background-image with its display set to none, then add it to the DOM. When the IMG is completed, the background should also be thanks to the browser cache, but I never tried that and I'm not sure if it would work or not.

 

[Noriaki]

I'm not exactly clear on what you are trying to do, but is there some reason the general domelement load event won't work for whatever it is?

If you really want to do it as a check, you could just set a variable in the load event and then check that variable.

 

[Chris27]

I'm not exactly clear on what you are trying to do, but is there some reason the general domelement load event won't work for whatever it is?

If you really want to do it as a check, you could just set a variable in the load event and then check that variable.

Correct me if I'm wrong, but doesn't the onload event fire only once when the page is first loaded? For what I'm doing, an ajax call is changing the sources of background images of a few divs. Some of these images are quite large. I need to know when the new images brought in by the ajax call finish loading.

 

[Noriaki]

Correct me if I'm wrong, but doesn't the onload event fire only once when the page is first loaded? For what I'm doing, an ajax call is changing the sources of background images of a few divs. Some of these images are quite large. I need to know when the new images brought in by the ajax call finish loading.

In any reasonably modern browser, you can put a load event on any element, and it fires when that element finished loading.

You could just say <div onload=" function(); "> or if you want to add events from javascript something like http://snipplr.com/view/3116/cross-browser-add-event-listener/

 

[Chris27]

In any reasonably modern browser, you can put a load event on any element, and it fires when that element finished loading.

You could just say <div onload=" function(); "> or if you want to add events from javascript something like http://snipplr.com/view/3116/cross-browser-add-event-listener/

say I have a div

    <div id='myDiv' onload='myCallback()' style="background-image : url('foo') />

and I change the background image

    jQuery("#myDiv").css("background-image", "url('bar')");

The callback doesn't get called when "bar" is loaded. The div element is already "loaded".

 

[Noriaki]

Right, I see what you mean now. You're just changing the background image. Sorry, I was confused. I was thinking you were creating a new div with the new background image in an ajax response and then adding it to the dom.

I'm not sure I can help you here, sorry.