Question

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

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

我尝试过类似的事情：

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

但这没有帮助。

我该怎么办？

Answer 1

<强>更新

我认为你必须尝试找到这个技巧here：

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

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

Answer 2

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

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 3

尝试单独加载图片和文字，而不是一次加载。

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

示例代码

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

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元素或样式表中声明图像大小是最佳实践建议

Reflows & Repaint

也许你会喜欢这样的东西

#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;
}

Fiddle

等待ajax操作上的图像满载

5 个答案: