Question

我当前的解决方案通过AJAX获取一些内容，将其插入DIV然后隐藏它并淡入它。

问题在于内容包含图片和iframe，解决方案闪烁，fadeIn看起来不平滑。

我想做的是在iframe和图片完全加载后仅fadeIn。

怎么做？

Answer 1

这将等到所有子内容完成加载后：

$("#wrapperDivID").load(function (){
    // do something, e.g.
    $(this).fadeIn();
});

请参阅.load()。

在您的具体情况下，以下情况应该有效：

$('#content').load('/echo/html/',data, function() {
  alert('fired');
});

Answer 2

我会更改fadeIn的持续时间，以便花费很长时间。

 $("#content").load("getform.php"), function() {
                $(this).fadeIn(1500);  // or another bigger number based on your load time
 });

如果您知道页面中的所有图像，请在页面中预加载div“content”的所有图像，以便节省一些加载时间。

Answer 3

如果您使用$.ajax来获取HTML，则可以将结果HTML包装成如下所示：

$.ajax('some/path/to.html',{
    'success':function(html){
        var result = $(html).load(function(){
            $('#content').fadeIn()
        });
        $('#content').html(result);
    }
});

jsfiddle example

Answer 4

另一种方法可以做到这一点：

$( "#content" ).fadeOut(200, function() {
    $(this).load( url, function() {
        $(this).fadeIn(200);
    });
});

将淡入和淡出时间更改为对您有用的任何内容。

在满载后淡入Ajax内容

4 个答案: