在完全加载后使用.load查看php远程文件

Question

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

Answer 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();
        });

    });
});