Question

问题一：点击链接时，我正在使用回调来做3件事
我认为问题可能出在加载上，加载功能完成但内容仍然没有显示几秒钟，为什么会发生？可能是加载函数无法识别加载的图像的大小但只计算html页面的大小？

1）SlideUp当前div（容器）
2）在$ iframe（div）中加载HTML内容（图像）
3）SlideDown $ iframe div，其内容为

问题是在在线环境中查看时不显示动画。它只适用于localhost，一切都会立即发生。

$(".container").slideUp(500, function(){
    $iframe.load($mylink, function(){
        $iframe.slideDown(500)}
)});

问题二：
我使用一个按钮来关闭加载html内容的div。当发生这种情况时，我必须清空div，以便重置每个加载内容的高度，但.empty（）只会使内容立即消失。我尝试先将它设置为动画，然后清空div，但它不像自己使用空时那样工作：

$close.click(function(){ $iframe.slideUp(500, function(){$iframe.empty()}), $(".container").slideDown(500)});

Answer 1

理论上，这应该可以在所有加载的内容被加载后触发动画：

//This is ajax load()
$iframe.load($mylink, function(){ 
    //This is event handler load()
    $iframe.load(function(){
        $iframe.slideDown(500);
    });
});

问题是，基于the docs

中提到的警告，我不确定加载事件处理程序的有效性

<强>更新

事实证明，load事件没有正确处理div中新元素的加载，它不会被触发。我相信最明智的解决方案是使用实际的<iframe>，它会在加载新的“src”时触发加载事件：

$iframe.attr('src', $mylink).load(function () {
    //set the height of the iframe to fit it's content
    $iframe.height($iframe[0].contentWindow.document.body.scrollHeight);
    $iframe.slideDown(500);
});

更新2

看到iframe解决方案不是跨浏览器的，也许这个hack可以工作：

$iframe.load($mylink, function (){
    var $imgs = $iframe.find('img'),
        count = 0;
    $imgs.load(function(){
        if (++count == $imgs.length){
            //all images have been loaded
            $iframe.slideDown();
        }
    });
});

我们回到使用div，然后在DOM中插入内容后，我们为所有添加的图像添加一个加载事件处理程序，并在加载所有图像时执行动画。

这是 new demo

未显示jQuery动画，因为内容尚未加载

1 个答案: