等待ajax操作上的图像满载

Wait for image full load on ajax action

本文关键字：图像 满载 操作上 ajax 等待      更新时间：2023-09-26

在我的页面上有一个ajax操作，它加载div，左边包含图像，右边包含文本。

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

我试过类似的东西：

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

但这无济于事。

我能做什么？

更新

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

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

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

您可以像一样跟踪所有图像何时加载

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();
     }
   });
}

您可以使用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;
}

小提琴。

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

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

样本代码

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

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

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

<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/

相关文章：