隐藏图像直到它们被加载 [英] Hide images until they're loaded

问题描述

我得到了一个jQuery脚本，它在某个时间间隔将数据附加到持有者。数据如下所示：

 < div class =item-box etc etc> < img src =data.png> < / DIV> 
  

我一次加载50张图片，我的目标是让它们 fadeIn ，当每个图像被加载。

我试过以下内容：

  parentDiv.on load，img，function（）{
 $（this）.parent（）。fadeIn（500）; 
}）; 
  

小提琴： http://jsfiddle.net/3ESUm/2/

但似乎在方法没有加载或准备好方法。

解决方案

只需在添加图片时设置onload属性即可。

  var img = new Image（）; 
 img.src =some url
 img.onload = function（）{$（img）.fadeIn（500）;} 
 document.getElementByID（'parent'）。appendChild张图片）; 
  

查看工作示例 here

I got a jQuery script which is dinamically appending data to the "holder" at some timeinterval. The data looks like this:

<div class="item-box etc etc"> <img src="data.png"> </div>

and I'm loading like 50 images at once, my goal is to make them fadeIn, when each image is loaded.

I've tried the following:

parentDiv.on("load", "img", function() {
    $(this).parent().fadeIn(500);
});

Fiddle: http://jsfiddle.net/3ESUm/2/

but seems that on method doesn't have load or ready methods. I ran out of ideas.

解决方案

just set the onload property when you add the image.

var img = new Image();
img.src = "some url"
img.onload=function(){$(img).fadeIn(500);}
document.getElementByID('parent').appendChild(img);

see working example here

这篇关于隐藏图像直到它们被加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！