view php remote file using .load after it's fu

问题:

I'm using a simple code to display php files in a container without loading the page using .load with a function to display and hide a loading animated image

<style>
.loadingbg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #84ffbf; 
display: none;
}
.loadingbg img{width: 60px; height: 60px; position: absolute; left: 48%; top: 48%;}
</style>

<script>
$(document).on('click','a',function (e) {
    $(".loadingbg").css('display','block');
    e.preventDefault();
    var url = $(this).attr('href');
    $('#container').load(url+ '#content',function () {
        $(".loadingbg").css('display','none');
    });
});
</script>

<div class="loadingbg"><img src="images/page-loader.gif"></div>
<a href="contact.php">contact</a>
<a href="about.php">about</a>

<div id="container">
    <h1>index</h1>
</div>

so when i click on a link it displays the background and the small animated image to load the other page without changing the url but it fetches the text content fast and the loadingbg disappears and it starts loading the images in the new webpage. What i want is not to hide the loadingbg until the remote php file is totally loaded including images.

Demo

回答1:

After you load the content, you have to make sure that all images are loaded.

1. In your load callback functions you can use imagesLoaded library (or any other library that validates image loading). Also on anchor click I hide the #container and when all the images are loaded - then show it again:

$(document).on('click','a',function (e) {
    $(".loadingbg").css('display','block');
    $("#container").hide();
    e.preventDefault();
    var url = $(this).attr('href');
    $('#container').load(url+ '#content',function () {
        $('#container').imagesLoaded( function() {
            // images have loaded
            $(".loadingbg").css('display','none');
            $("#container").show();
        });

    });
});

回答2:

I have to admit that I'm not 100% sure this will work...

But I would try this:

$(document).on('click','a',function (e) {
    $(".loadingbg").css('display','block');
    e.preventDefault();
    var url = $(this).attr('href');
    $('#container').load(url+ '#content',function () {
        $('#container').on("load", function(){
            $(".loadingbg").css('display','none');
        });
    });
});

Binding the "load" event to your #container in the .load() callback is supposed to "delay" the .loadingbg CSS change to the moment where all content has completely loaded.