等待多个图像加载，然后向下滑动div [英] waiting for multiple images to load before sliding div down

问题描述

我正在尝试将多个图像加载到名为"images"的div中，当它们完成加载时，我希望它向下滑动div"images"，这将显示刚刚加载到其中的实际图像，然后我我在写出确切的实现方法上有些麻烦.

I'm trying to load several images into a div named 'images', when they finish loading I want it to slidedown the div 'images' which will show the actual images that have just been loaded into it, and I'm having a little bit of trouble writing out exactly how to make that happen.

这是我到目前为止所掌握的，这是不正确的:

This is what I have so far, it's not quite right:

$('#button').click(function() {
    var image=$('#images');

    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/home.jpg"
    }).appendTo("#images");
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/inventory.jpg"
    }).appendTo("#images");
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/services.jpg"
    }).appendTo("#images");

    if (image.get(0).complete) { image.slideDown(300); } 

});

推荐答案

只需监听图像load事件.在事件处理程序中，对图像进行计数，如果加载的图像数与请求的图像总数相符，则开始显示.

Just listen for image load event. In the event handler count images and if the number of loaded images matches the toal number of requested images then start the show.

http://jsfiddle.net/ZsGHY/

var imgCount = 0;
var image=$('#images');
$('#button').click(function() {
    console.log("Loading...");

    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/home.jpg"
    }).appendTo("#images").load(onImage);
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/inventory.jpg"
    }).appendTo("#images").load(onImage);
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/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事件，一旦发生，该函数将被执行.

.load(function name) means that we are attaching an event listener which will listen for load event and once it happens the function will be executed.

onLoad(e){}表示名为onLoad的函数带有一个参数-该参数是从事件侦听器传递的，它是一个event对象. 在函数内部，e可用于检测触发事件的对象，以提供更多日期信息...

onLoad(e){} means that the function named onLoad takes one argument - this argument is passed from event listener and it is an event object. Inside the function the e can be used to detect the object which trigerred the event, to gater some date an more...

这篇关于等待多个图像加载，然后向下滑动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！