完全加载后，使用.load查看php远程文件 [英] view php remote file using .load after it's fully loaded

问题描述

我正在使用一个简单的代码来显示容器中的php文件，而无需使用.load和具有显示和隐藏正在加载的动画图像的功能的页面来加载

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>

因此，当我单击链接时，它将显示背景和小的动画图像以加载其他页面而不更改url，但它会快速获取文本内容，并且loadingbg消失，并且开始在新网页中加载图像.我要的是不要隐藏该loadingbg，直到远程php文件包括图像完全加载为止.

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.

演示

推荐答案

加载内容后，必须确保已加载所有图像.

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

1. 在加载回调函数中，您可以使用 imagesLoaded库(或任何其他可验证图像加载的库).同样在锚点上，单击我隐藏#container"，然后在加载所有图像后再次显示:

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

    });
});

这篇关于完全加载后，使用.load查看php远程文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！