在滑动div之前等待加载多个图像

我正在尝试将几个图像加载到一个名为“images”的div中，当它们完成加载时我想让它滑动div“图像”，它将显示刚刚加载到其中的实际图像，并且我有一个写出确切如何实现这一点的一点点麻烦。

这是我到目前为止所做的，它不太正确：

$('#button').click(function() { var image=$('#images'); $("", { src: "http://sofzh.miximages.com/jquery/home.jpg" }).appendTo("#images"); $("", { src: "http://sofzh.miximages.com/jquery/inventory.jpg" }).appendTo("#images"); $("", { src: "http://sofzh.miximages.com/jquery/services.jpg" }).appendTo("#images"); if (image.get(0).complete) { image.slideDown(300); } }); 

Answer 1

只是听取图像load事件。 在事件处理程序计数图像中，如果加载的图像数与所请求图像的数量匹配，则启动该节目。

http://jsfiddle.net/ZsGHY/

 var imgCount = 0; var image=$('#images'); $('#button').click(function() { console.log("Loading..."); $("", { src: "http://sofzh.miximages.com/jquery/home.jpg" }).appendTo("#images").load(onImage); $("", { src: "http://sofzh.miximages.com/jquery/inventory.jpg" }).appendTo("#images").load(onImage); $("", { src: "http://sofzh.miximages.com/jquery/services.jpg" }).appendTo("#images").load(onImage); }); function onImage(e) { console.log("Image loaded"); imgCount++; if (imgCount == image.children().length) { image.slideDown(3000); } } 

.load(function name)意味着我们附加了一个侦听load事件的事件监听器，一旦它发生，就会执行该函数。

onLoad(e){}意味着名为onLoad的函数接受一个参数 – 该参数从事件侦听器传递，它是一个event对象。 在函数内部， e可用于检测触发事件的对象，以更多地约会某个日期……

Answer 2

有一个很好的jQuery插件，可以在元素中的所有图像加载后触发事件： http ： //desandro.github.com/imagesloaded/

在Fiddle中查看此示例： http ： //jsfiddle.net/TFVc9/2/

 $('#button').click(function() { var image=$('#images'); //... image.imagesLoaded( function() {image.slideDown(300)} ); }); 

Answer 3

试试以下代码：