Waiting for multiple images to load before dragging down

微信扫一扫,分享到朋友圈

Waiting for multiple images to load before dragging down

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

});

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)
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){}
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…

微信扫一扫,分享到朋友圈

Waiting for multiple images to load before dragging down

C语言求勾股数代码及解析

上一篇

通过发布订阅模式实现的事件委托

下一篇

你也可能喜欢

Waiting for multiple images to load before dragging down

长按储存图像,分享给朋友