Running jQuery code after page finishes loading AJAX content

Question

I have a page that loads content through AJAX. Among this content are some images. I need to do some formatting to the page layout depending on the images sizes (which vary) but in order to get the sizes, I need the images to finish loading first before running the code. If it was in an ordinary page (content loading normally WITHOUT AJAX), all I have to do is use the $(window).load() function but with AJAX it doesn't trigger for some reasons. I need a workaround to this : a way to execute some code after the images loaded through AJAX finish loading.

Basically, this is what I'm trying to do

ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
document.getElementById("results").innerHTML=ajaxRequest.responseText;
//the responseText includes images among other information to be loaded 
$(window).load(function() {
...some code
});}}

but the $(window).load() never fires and I need to run the code once ALL images have finished loading so binding a load event to every image isn't really an option.

I have another question that is related and similar to the first one : the jQuery $(document).ready doesn't seem to fire either after content is loaded through AJAX. I don't need it right now but I will certainly do in the future, so any workarounds for this too ?

I would really appreciate your help and thanks a lot.

Bear in mind that $(element).load) is an AJAX request. <- Edit: I was wrong, ignore this comment — Cranio
– Cranio, Commented Jun 24, 2012 at 17:07
i guess $(window).bind('load',function) would be the event you are looking for — krichard
– krichard, Commented Jun 24, 2012 at 17:10
@charlietfl Oh my bad, didn't know! Sorry to you and the OP and thanks for pointing out. — Cranio
– Cranio, Commented Jun 24, 2012 at 17:10
@KaiKönig Does that work (adapted) on a div instead of the window ? — Denys Séguret
– Denys Séguret, Commented Jun 24, 2012 at 17:11

Denys Séguret · Accepted Answer · 2012-06-24 19:34:09Z

3

$(window).load works only for the page initial loading.

The only clean solution I see is counting the images (hoping they're the only problem) and waiting for them to load :

$('#results').load('youurl', function() {
    var $images = $('#contenu img');
    var count = $images.length;
    console.log('initial images count : ', count);
    var decrement = function() {
        if (--count==0) {
            console.log('All images loaded');
            // do something                 
        }
    };
    $images.each(function(){
       if (this.complete) {
           decrement();
       } else {
           this.onload = function(){
                decrement();
           };
       }
    });
});

This is now testable on this site : click a link for a recipe and look at the console.

edited Jun 24, 2012 at 19:34

answered Jun 24, 2012 at 17:07

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ilyes Ferchiou Over a year ago

Thank you a lot for your answer, this function does actually make all the code much shorter and easier. I'm new to AJAX, this is why I used the first thing I found which was the XMLHttpRequest. However, even though this function made things easier, my code, when placed in the callback function, launches immediately after the query is processed and NOT after all data has been loaded and images rendered. So basically, my code runs but can't get the images sizes since it runs before the images finish loading so now my code is shorter but I still have the same issue.

Denys Séguret Over a year ago

You're right. I've put a new (tested) version. But this is not generic and works only for images. You would have to extend it for more complex cases.

Ilyes Ferchiou Over a year ago

This is exactly what I was thinking of, but since I know there are some issues with the .load() function used with images, I wanted to avoid it. At least it works with the latest versions of IE,FF and Chrome. If any problems arise with other browsers or earlier versions, I'll deal with it. Thank you a lot for writing the code for me, you just made my life easier twice today. And I learned two new things, the AJAX load function and (even though obvious I guess) : that you can make an operation "--count" here, within a condition check. I'm a mechanical engineer so... And best answer it is.

Ilyes Ferchiou Over a year ago

Well, actually it works. But before, in other websites, I was trying to bind a load() event to images and I noticed in some cases (some old versions or some specific cases) it doesn't work. It is a well know issue, you can read about it in the "Caveats of the load event when used with images" section of this website

Interrobang · Accepted Answer · 2012-06-24 17:09:40Z

3

I believe what you want is the imagesLoaded plugin. After loading the markup via AJAX, select the images inside this div and call .imagesLoaded() on them:

$('.article img').imagesLoaded( myCallbackFunction );

answered Jun 24, 2012 at 17:09

Interrobang

17.5k3 gold badges57 silver badges63 bronze badges

2 Comments

Ilyes Ferchiou Over a year ago

Thank you a lot for your answer, but this is a workaround for cashed images, this is not my case. My code doesn't trigger even when the images are NOT cashed. And in this case I'm dealing with images, but in general, when I have a code to run after that certain data inserted through AJAX has completely rendered, I want to know how I can make it run.

srgb Over a year ago

This one works. Needed to execute js after image requests from ajax response are done loading, and this plugin does just that

Cranio · Accepted Answer · 2012-06-24 17:09:11Z

0

Besides, you use the XMLHttpRequest... it's much easier with JQuery. You can get rid of all the code you posted and simply do:

$("#results").load("ajaxpage.php", function() { ... some code... });

Is all that you need. If you need to fire some code when the window is loaded, use your $(window).load(). If you need to fire the code after the ajax request, just put it in the callback function() above

answered Jun 24, 2012 at 17:09

Cranio

9,8764 gold badges37 silver badges55 bronze badges

1 Comment

Ilyes Ferchiou Over a year ago

Thank you a lot for your answer, but as I said to dystroy, placing my code in the callback function makes it run immediately after the query is processed and NOT after all data has been loaded and images rendered. So basically, my code runs but can't get the images sizes since it runs before the images finish loading so now my code is shorter but I still have the same issue.

Collectives™ on Stack Overflow

Running jQuery code after page finishes loading AJAX content

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related