Is it possible to load an external page with images in a div using load (), and show the page only when the images are loaded?

Question

I have two pages:

index.php and external.php

in the index, I have the function:

$('#buttom').click (function (e) {
    e.preventDefault (); 
    //click action 

    $('#ext-container').load('external.php');

});

And its ok, works fine. But I would like to hide the page before it is fully loaded.

I tried this on the external page:

**css**

#wrapper{
    display:none;
}


$(window).load(function() {

    $('#wrapper').fadeIn(2000);

});

but it only works when I open the page in normal browsing, using the load(external.php) the page keeps loading in stages.

Any ideas?

[UPDATE]

Fellows, using the tip of the TrueBlueAussie, the plugin waitForImages, worked like a charm.

Here is the solution:

in page index still the same, just load normaly.

$('#buttom').click (function (e) { e.preventDefault (); //click action
```
$('#ext-container').load('external.php');
```
});
now in external.php

script type='text/javascript' src='jquery.waitforimages.min.js'

important CSS:

#wrapper{
  display:none;
}

$(document).ready(function(){

    $('.wrapper').waitForImages(function() {

        $(this).fadeIn(2000);
   });

});

Ty all, will surely help many oders. Sorry my bad english!

Gone Coding · Answer 1 · 2014-06-04T14:27:37.513

1

How about just hide/show the loading container?

$('#buttom').click (function (e) {
    e.preventDefault (); 
    //click action 
    $('#ext-container').css({display: 'none'});
    $('#ext-container').load('external.php', function(){
        $('#ext-container').show();
    });

});

Which simplifies to:

$('#buttom').click (function (e) {
    e.preventDefault (); 
    var $container = $('#ext-container')
    //click action 
    $container.css({display: 'none'}).load('external.php', function(){
        $container.show();
    });

});

Basically load can take a complete function http://api.jquery.com/load/ that can do anything you want after the load completes (not images, just the page).

Update

Try https://github.com/alexanderdickson/waitForImages

$('#buttom').click (function (e) {
    e.preventDefault (); 
    var $container = $('#ext-container')
    //click action 
    $container.css({display: 'none'}).load('external.php', function(){
        $container.waitForImages(function(){$container.show();});
    });

});

edited Jun 04 '14 at 14:27

answered Jun 04 '14 at 13:59

Gone Coding

88,305
23
172
188

Yes, had already thought of that solution, but like you said, does not work with images inside the external. The page is loaded, but the images still loading. – Mike Oliveira Jun 04 '14 at 14:09
You could add a `onload` event to all images on the loaded portion? Will images load at all though if the section is hidden? – Gone Coding Jun 04 '14 at 14:17
You could try one of the old preload image techniques: calling ajax on each of the loaded image Urls. Wait for all the Ajax promises to all complete and then you can guarantee the browser has the images cached when you show the div. – Gone Coding Jun 04 '14 at 14:25
See [this question](http://stackoverflow.com/q/3877027) for techniques for correctly firing events when images load. – Blazemonger Jun 04 '14 at 14:27
@Mike Oliveira: Blazemonger 's link does as I suggested in comment. I have also added a sample of a plug-in I found that does the same thing but encapsulated so easier to use. – Gone Coding Jun 04 '14 at 14:30

Is it possible to load an external page with images in a div using load (), and show the page only when the images are loaded?

1 Answers1

Update