PHP User PHP User - 1 month ago 12
PHP Question

view php remote file using .load after it's fully loaded

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

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

    });
});
Comments