jquery - 是否可以使用 load() 加载带有 div 中的图像的外部页面，并仅在加载图像时显示页面？

Question

我有两个页面:

index.php 和 external.php

在索引中，我有以下功能:

$('#buttom').click (function (e) {
    e.preventDefault (); 
    //click action 

    $('#ext-container').load('external.php');

});

一切正常，工作正常。但我想在页面完全加载之前隐藏该页面。

我在外部页面上尝试过:

**css**

#wrapper{
    display:none;
}


$(window).load(function() {

    $('#wrapper').fadeIn(2000);

});

但只有当我在正常浏览中打开页面时，它才有效，使用 load(external.php) 页面会分阶段加载。

有什么想法吗？

[UPDATE]

Fellows，使用 TrueBlueAussie 的技巧，即 waitForImages 插件，效果非常好。

解决方案如下:

• 页面索引仍然相同，只需正常加载即可。

  $('#buttom').click (函数(e) { e.preventDefault(); //点击 Action

  $('#ext-container').load('external.php');
  

  });

• 现在在 external.php

  脚本类型='text/javascript' src='jquery.waitforimages.min.js'

重要的CSS:

#wrapper{
  display:none;
}

$(document).ready(function(){

    $('.wrapper').waitForImages(function() {

        $(this).fadeIn(2000);
   });

});

你们一定会帮助很多订单。抱歉我的英语不好!

Answer 1

隐藏/显示装载容器怎么样？

$('#buttom').click (function (e) {
    e.preventDefault (); 
    //click action 
    $('#ext-container').css({display: 'none'});
    $('#ext-container').load('external.php', function(){
        $('#ext-container').show();
    });

});

这简化为:

$('#buttom').click (function (e) {
    e.preventDefault (); 
    var $container = $('#ext-container')
    //click action 
    $container.css({display: 'none'}).load('external.php', function(){
        $container.show();
    });

});

基本上load可以采用complete函数http://api.jquery.com/load/加载完成后可以做任何你想做的事情(不是图像，只是页面)。

更新

尝试https://github.com/alexanderdickson/waitForImages

$('#buttom').click (function (e) {
    e.preventDefault (); 
    var $container = $('#ext-container')
    //click action 
    $container.css({display: 'none'}).load('external.php', function(){
        $container.waitForImages(function(){$container.show();});
    });

});