是否可以使用 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) 页面会分阶段加载。

有什么想法吗？

[更新]

伙计们，使用 TrueBlueAussie 的尖端，插件 waitForImages，就像一个魅力。

解决办法如下：

• 页面索引还是一样，正常加载即可。

  $('#buttom').click (function (e) { e.preventDefault(); //点击动作

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

});

Ty all，肯定会帮助许多订单。对不起我的英语不好！

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

});