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

Question

我正在使用一个简单的代码在容器中显示 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>

所以当我点击 link 它会显示背景和小动画图像以加载另一个页面而不更改 url 但是它快速获取文本内容并且 loadingbg 消失并且它开始在新网页中加载图像。我想要的是在远程 php 文件包括图像完全加载之前不隐藏 loadingbg。

Demo

Answer 1

我不得不承认我不是 100% 确定这会奏效...

但我会试试这个：

$(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 应该 "delay" .loadingbg CSS 更改为所有内容都已完全加载的时刻。

Answer 2

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

在您的加载回调函数中，您可以使用 imagesLoaded library（或任何其他验证图像加载的库）。同样在锚点上单击我隐藏 #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();
        });

    });
});

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

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

javascript

php

ajax

jquery

load