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

我正在使用一个简单的代码在容器中显示php文件而不使用.load加载页面，其中包含一个显示和隐藏加载动画图像的函数

 .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%;}   $(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'); }); });  
 contact about 
 
index
  

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

演示

Answer 1

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

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

Answer 2

我必须承认，我不是百分百肯定这会起作用……

但我会试试这个：

 $(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更改“延迟”到所有内容已完全加载的时刻。