Fadein div once everything is loaded

Question

I'm using a simple load to fill a div with content using a fadein as the callback. I then have a secondary fadein for the images to reduce their pop in.

I'd like to remove this pop in entirely and have the page fadein only once all images have been loaded, so it all loads as one piece. How do i achieve this?

$("#content").load("pages/test.htm", function () {
    $("#page").fadeTo(250, 1, "swing");
});

then on the loaded page

$('img').load(function (e) {
    $('img').fadeIn();
});

how can I achieve this?

Similar question: http://stackoverflow.com/questions/476679/preloading-images-with-jquery — darshanags, Feb 18 '13 at 05:34

BBagi · Accepted Answer · 2013-02-18T05:39:01.830

0

This is kind of a confusing question but wouldn't the following work?

$('img').load(function() {
    $("#page").fadeTo(250,1,'swing');
});

edited Feb 18 '13 at 05:39

answered Feb 18 '13 at 05:32

BBagi

2,035
1
19
23

Worked perfect! I could have sworn i tried this before, something must have been wrong when i did. Thank you! – hOOks7 Feb 18 '13 at 05:55

score 0 · Answer 2 · answered Feb 18 '13 at 05:33

0

$(window).load(function(){
    // do your fade in here
});

answered Feb 18 '13 at 05:33

tuespetre

1,827
2
18
30

score 0 · Answer 3 · answered Feb 18 '13 at 05:46

0

Try this:

$("#content").load("pages/test.htm", function () {
    $("#page").fadeTo(250, 1, "swing",function(){
        $('img').fadeIn();
    });
});

answered Feb 18 '13 at 05:46

Rohan Kumar

40,431
11
76
106

Fadein div once everything is loaded

3 Answers3