javascript - 等待图像完全加载 ajax 动作

Question

在我的页面上有ajax加载的动作，其中div包含左侧的图像和右侧的文本。

问题：首先是文本加载，在左侧（左对齐），然后是图像加载，文本在右侧移动，看起来真的很不流畅。

我尝试了类似的东西：

$('div#to_load').ready(function() {
    $('div#to_load').fadeIn();
});

但这无济于事。

我能做些什么？

Answer 1

更新

我认为您必须尝试在这里找到的这个技巧：

$("<img />", { src:"thelinkofyourimage"}).appendTo("div#to_load").fadeOut(0).fadeIn(1000);

看看这个小提琴：http: //jsfiddle.net/qYHCn/。

Answer 2

尝试分别加载图像和文本，而不是一次。

对于移位问题，将图像放入另一个 div 并在加载时定义大小。然后文本不能进入图像空间，因为我们已经为图像 div 提供了空间。

示例代码

$('#ImageID')
 .load(
      function(){
           //Do stuff once the image specified above is loaded
           $('#textId').html('your text');
      }
 );

Answer 3

您可以像这样跟踪所有图像的加载时间

var element = $('div#to_load');
var images = element.find('img');
var count = images.length;

for( var i = 0; i < count; i++) {
   $(images[i]).load(function(){
     count--;
     if( count === 0 ){
        element.fadeIn();
     }
   });
}

Answer 4

如果您不希望内容移动，则必须声明图像将占用的大小，以便在浏览器渲染时已经考虑到所需的空间。

确保在加载之前声明图像的大小或容器的大小

<div id="to_load">
    <img src="...." height="400" width="400" />
</div>

或者

<div id="to_load" style="height:400px;width:400px;overflow:hidden">
    ..dynamic content
</div>

在 img 元素或样式表中声明图像大小无论如何都是最佳实践建议

回流和重绘

---

也许你想要这样的东西

#to_load {
    width: 523px;
    height: 192px;
}
#to_load img {
    display: none;
}

setTimeout(function() {
    $("<img />", { src:"http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png"})
        .on('load', function(){
            $(this).appendTo("#to_load").fadeIn(500);
        });
},1000);

http://jsfiddle.net/AWntU/

Answer 5

您可以使用 jQuery 平滑地对其进行动画处理（无论如何，当您使用 jQuery 执行 ajax 请求时都很方便）：

jQuery

$("body").prepend('<img src="http://placehold.it/150x150" alt="img">');
$("img").animate({
    opacity: 1,
    left: 0
}, 700);

CSS

img {
    float: left;
    margin-right: 0.8em ; 
    left: -300px;
    position: relative;
}

小提琴。