CODEWITHSUNDEEP
javascriptjquery
Tara Irvine
Tara Irvine

Reputation: 819

How can I load image 1 then image 2 then image 3 etc

I have a piece of code that loads a number of images into a div, I want to be able to load image1, fades in as it moves up 10px, then image2 fades in and moves up 10px.

So far I have this 

$(this).find(".portfolio").load(newAppLink+" .container", function(){
$("<ul class='thumbs'></ul>").appendTo(this);
var images = $(this).find(".hiddenField").val();
var imageArray = images.split(',');

$.each(imageArray, function(index, value){
    var imageHtml = "<li><a class='gallery-link' href='#'><img src='" + value + "?Action=thumbnail&Width=400&Height=400&algorithm=proportional" +"' alt /></a></li>";

$(linkClicked).find(".portfolio .thumbs").append(imageHtml);
$(".thumbs").find("img").each(function(){

$(this).hide();
$(this).load(function(){
var width = $(this).width();
$(this).parent().parent().width(width);
$(this).fadeIn();
$(this).parent().siblings().find("a").fadeIn();
});
});

});//END EACH IMAGEARRAY
});

It does load them in but they load all over the place and I get a jumpy movement. I think if they loaded one after the other it'll look a lot better.

Any ideas?

Thanks for the help

Upvotes: 1

Views: 128

Answers (3)

Brian Scott
Brian Scott

Reputation: 9361

You could use something like the lazyLoad jquery plugin.

This allows you to control the order of when images are loaded into the page. Another benefit is that you can set it up to only load images as and when the user scrolls to a position that means they are in view. This saves bandwidth and increases the initial load speed of your site.

Upvotes: 0

Marcin
Marcin

Reputation: 49836

When you load an image, attach an event handler to it that will trigger on fade, in which you load the next image.

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

With fadeIn you can provide a second argument which is a callback function that is called after the fading is finished: you can use that to chain the fading of several images.

You could do (have to change this to the real elements):

$(this).fadeIn('500', function(){
    $(this).parent().siblings().find("a").fadeIn();
});

Upvotes: 1

Related Questions