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

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

本文关键字：加载 load 程文件 PHP 文件      更新时间：2023-09-26

我使用一个简单的代码来显示php文件在容器中没有加载页面使用。load函数来显示和隐藏加载动画图像

<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文件完全加载，包括图像。

演示

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

    在你的加载回调函数中，你可以使用imagesLoaded库(或任何其他验证图像加载的库)。同样在锚点点击我隐藏#container，当所有的图像加载-然后再次显示它:
$(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();
        });
    });
});

我不得不承认，我不是百分之百确定这将工作…

但我想试试这个:

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

将"load"事件绑定到.load()回调中的#container，应该"延迟".loadingbg CSS更改到所有内容完全加载的时刻。

相关文章：