0

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

1) SlideUp 当前 div(container)
2) 在 $iframe(div) 中加载 HTML 内容(图像)
3) SlideDown $iframe div 包含内容

问题是在在线环境中观看时不显示动画。它仅适用于一切都会立即发生的本地主机。

$(".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)});
4

1 回答 1

1

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

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

问题是，根据文档中提到的警告，我不确定加载事件处理程序的有效性

更新

事实证明，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 后，我们为所有添加的图像添加一个加载事件处理程序，并在所有图像加载后执行动画。

这是新的演示

于 2013-09-08T07:46:27.980 回答