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]

研究员，使用TrueBlueAussie的提示，插件waitForImages，就像一个魅力。

以下是解决方案：

在页面索引中仍然相同，只需加载normaly。

$（＆＃39;＃buttom＆＃39;）。click（function（e）{ e.preventDefault（）; //点击动作
```
$('#ext-container').load('external.php');
```
}）;
现在在external.php

脚本类型=＆＃39; text / javascript＆＃39; SRC =＆＃39; jquery.waitforimages.min.js＆＃39;

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

});

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

1 个答案:

更新