2

I have an Apllication Which has many divs each having different image as background image as CSS... How can I know if the background image applied to the div is completely loaded...

Jakub Hampl
  • 39,863
  • 10
  • 77
  • 106
pradz
  • 21
  • 1
  • 2

2 Answers2

1

The window.onload event is fired when the page is complete loaded, which also includes the images

Julian
  • 33,915
  • 22
  • 119
  • 174
  • +1 was going to suggest this. Can also use JQuery .ready() as well if you prefer handling it with JQuery – Alex Mar 12 '11 at 19:00
  • @Alex, no `jquery.ready` is the same as DomLoaded event, this is BEFORE the images are downloaded. Most of the time you use the DomLoaded/ready event, but not in this case. – Julian Mar 12 '11 at 19:02
  • http://api.jquery.com/ready/ "While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received." – Alex Mar 12 '11 at 19:08
  • @Alex: so it says: (on)load is called **after** images donwloading. Most of the time this is unwanted (too late), so they created the ready/domloaded. Same page: "In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the **load** event instead." – Julian Mar 12 '11 at 19:26
  • 2
    Window.onload may not work in my case as My divs are created dynamically but not onload... – pradz Mar 13 '11 at 17:18
0

You need to 'preload' your background images first, then set them to divs

You can look at this question:

Preloading images with jQuery

Community
  • 1
  • 1
ngduc
  • 1,415
  • 12
  • 17
  • also, this is another good read: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript – ngduc Mar 12 '11 at 18:56