Function to determine if DOM and Images are loaded within AJAX call .load

Question

I'm using an function to dynamically load content via Ajax using this way:

$("#content").load('file.html', function(response, status, xhr){
     alert('test');
});

The alert loads when the request is succesfull but before any images are loaded. Is there any function I can use that triggers after all images (within file.html) are loaded and the DOM is fully ready? I've tried the usual, like $(window).load and $(document).ready, but that obviously would not work, which makes sense.

Edit for future reference: To clarify, I was using skrollr on the content loaded. Since that plugin adapts the body height based on the content loaded, it messed up badly on ios devices. Using this function I can make sure the skrollr instance is not refreshed too early.

you should use `$.get()` instead and set some logic inside success callback — A. Wolff, Jan 05 '15 at 12:42

score 2 · Accepted Answer · answered Jan 05 '15 at 12:41

2

You can use imagesloaded jQUery plugin, try to use inside ajax done callback function on loaded content, see below sample code

$("#content").load('file.html', function(response, status, xhr){
     $("#content").imagesLoaded( function(){
          alert('test');
     });

});

answered Jan 05 '15 at 12:41

Girish

11,907
3
34
51

but `load()` complete callback is fired ***after*** response added to the DOM: `If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed.` – A. Wolff Jan 05 '15 at 12:43
yes, `OP` want to trigger when ajax content all images loaded this plugin provide solution, and he can hide content while images not loaded – Girish Jan 05 '15 at 12:47
i guess OP wants to append it to the DOM only once all images loaded. Following your edit, ya it could be a solution – A. Wolff Jan 05 '15 at 12:48
it's not possible, but he can apply trick, that would be work same as `OP` want to do – Girish Jan 05 '15 at 13:10
1

This trick works perfectly. To clarify, I was using skrollr on the content loaded. Since that plugin adapts the body height based on the content loaded, it messed up badly on ios devices. Using this function I can make sure the skrollr instance is not refreshed too early. – sv88 Jan 05 '15 at 13:13
@sv88 gland to help you. – Girish Jan 05 '15 at 17:33

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

I believe your question is answered by this post, Does AJAX loaded content get a "document.ready"?. Short answer is no, it isn't, and you need to add a listener for the items inside the loaded content. That should be easy though.

edited May 23 '17 at 12:28

Community

1
1

answered Jan 05 '15 at 12:40

Raymond Camden

10,661
3
34
68

Function to determine if DOM and Images are loaded within AJAX call .load

2 Answers2