ansaurus

Question

Official way to ask jQuery wait for all images to load before executing something

Answer 1

+45 A:

I think that $(window).load() can set up a function to be called once all the images are loaded.

I've never actually tested this however since I find jQuery's run-when-dom-loaded to be invaluable.

Something like this should suffice:

$(window).load(
    function() {
        // weave your magic here.
    }
);

Update:

I have now had a chance to test it (since I finally needed it for something) and it works fine. The second the last image loads, this function starts running.

I'd actually forgotten I'd answered this question for someone and was searching Google for an answer - it sent me here to remind me that my brain is slowly turning to mush :-)

paxdiablo 2009-02-13 07:03:14

*smacks forehead* +1 totally forgot that. $(window).load() won't fire until images are done.

Paolo Bergantino 2009-02-13 07:05:11

thanks! that did it. i didn't actually notice how bad the effect was until i tested locally in Safari on Windows. then it became painfully obvious that i needed to do this. smacks forehead

Simon_Weaver 2009-02-13 07:12:38

except you don't need the waiting thing. just put the logic in load(..). is that what you meant by 'smacks forehead'?

Simon_Weaver 2009-02-13 07:13:35

fixed version works. thanks !

Simon_Weaver 2009-02-13 07:14:12

Yeah, I ran my waiting version and FF pretty well swallowed the CPU. That's why I changed it.

paxdiablo 2009-02-13 07:14:57

Nah, I just smacked my forehead because of the answer. he initially didn't have the waiting stuff.

Paolo Bergantino 2009-02-13 07:25:45

Just so you know, Safari sometimes fires onload before images have completely loaded. I can't reproduce it reliably but it does happen.

eyelidlessness 2009-02-13 08:33:00

@eyelidlessness - so is that going to also affect $(window).load or just body.onload ?

Simon_Weaver 2009-02-13 09:10:36

+1: This is exactly what I've been looking for.

Julian 2009-03-06 15:04:14

Exactly what I was looking for also. Thanks!

Aaron 2009-09-29 13:49:44

I've done the same. Even, read through an answer not knowing it was me and still not understanding it.

Rimian 2010-09-17 05:57:40

Answer 2

A:

I know this thread is now old, but $(window).load() does not seem to work for any webkit browsers. Anybody know of a way to get a webkit browser to wait until all images are loaded? $("img").load(function()) does not work, either. I think that just starts function() after the FIRST image is loaded.

What does work is to use the onload event of the last image on the page. In my case, I put in a 1x1 spacer image as the last thing on the page. Kinda hackish, but it works. It would be nice to have a more graceful way to do it.

2009-07-10 14:56:20

Answer 3

A:

$(window).load() is working for Safari here. it's a webkit browser.

2009-08-23 11:49:07

Answer 4

A:

It seems to be that if the properties are changed prior to the images being loaded they don't get stored in the DOM, even if you've waited for the DOM to load. Problem with the way Chrome/Safari does things perhaps?

Warren Bates 2010-02-10 13:13:48

Answer 5

+6 A:

$(window).load() will work only the first time the page is loaded. If you are doing dynamic stuff (example: click button, wait for some new images to load), this won't work. To achieve that, you can use my plugin:

http://plugins.jquery.com/project/BatchImagesLoad

HY 2010-02-22 15:13:44

Answer 6

A:

Thanks so much for the tip Paxdiablo!!!! :) Just what i needed here

Nauris 2010-03-31 17:03:43

Don't post comments as answers.

DMin 2010-08-18 01:43:44

worthlesss as his comment is, poor Nauris doesn't have enough SO points to actually comment...

Oskar Austegard 2010-09-08 16:46:10

Answer 7

A:

I just want you to know, that this tip rocks. I was having a problem with a picture slider that fades out an image (#current_pic), then changes the src, then fades the same #current_pic back in.

The browser kept trying to show the image before it loaded --> and not fading.

Then I used:

$("#current_pic").load(function{ $("#current_pic").fadeIn('slow'); });

and the browser waits until loading and the slick fadeIn action works. Thanks!

Adrien 2010-08-18 01:31:29

Answer 8

A:

Hi all, Been reading this forum for a while, this will be my first comment/question.

I want to fade in some images when a visitor comes to my homepages, so thanks for the explanation, all is working well on FF, Safari and Chrome. It doesn't seem to work on IE though. Tried it on two different computers, with newest versions.

Can someone advise me on this one please? My website is http://www.laforcemajeure.nl

This is my code, which is on the bottom of my script.js file:

 $(window).load(
    function() {
        $("#allbirds").fadeIn(2000);
    }
 );

Thanks in advance, hope it's something simple. Greetings, Wouter

Wouter 2010-10-19 13:25:47

@wouter welcome to Stack overflow. you should delete this answer here (as its not an answer to this question) and ask it as a new question. if you can include details of what version of IE you're testing on and what exactly doesn't work you'll get better answers. ps. don't ever be afraid to ask new questions - just provide as much detail as you can and check first for similar ones. good luck :-)

Simon_Weaver 2010-10-20 00:54:20

ansaurus

tags:

views:

answers:

Official way to ask jQuery wait for all images to load before executing something

related questions