jquery: How do i fade in on load each image in an array of images?

时间:2016-02-12 20:25:16

标签: javascript jquery image fade preloading

I'm really new to Jquery, however, i've done research and tried hard to do this. I have successfully made one image to do what i want:

  • preload the image( img = new Image(); $(img).attr('src', someurl);)
  • append it to a container
  • fade in the image ( using .hide() and .fadeIn(500) )
  • on load add some class and hide a .gif image with the loading animation

using this code:

 ...
  Downloading Local Maven repository for Support Libraries, revision 28
  Installing Local Maven repository for Support Libraries, revision 28
    Installed Local Maven repository for Support Libraries, revision 2899%)
  Downloading Google Play services, revision 29
  Installing Google Play services, revision 29
    Installed Google Play services, revision 2996%)
  Downloading Google Repository, revision 25
  Installing Google Repository, revision 25
    Installed Google Repository, revision 2599%)
 ...
  Done. 34 packages installed.

where .loader is class added to a div that shows the loading.gif animation.

Now, what i want to achieve is to implement this on an array of image srcs and this is what i have so far:

var img = new Image();
$(img).attr('src', 'images/thumbnails/thumb1.png').attr('alt', 'thumbnail' + 1);
$(img).appendTo($('.thumbnail')).hide().fadeIn(400);
$('.thumb img').load(function(){
  $('.loader').fadeOut(300);
  $(this).addClass("thumbimage");
});

I've also tried to move the .append() into the .load(..) and failed.

2 个答案:

答案 0 :(得分:0)

SELECT TOP(1) a.COLUMN_NAME FROM INFORMATION_SCHEMA.REFERENTIAL_CONSTRAINTS b JOIN 
                INFORMATION_SCHEMA.KEY_COLUMN_USAGE a ON a.CONSTRAINT_CATALOG = b.CONSTRAINT_CATALOG AND a.CONSTRAINT_NAME = b.CONSTRAINT_NAME WHERE a.COLUMN_NAME = *your column*)

答案 1 :(得分:0)

There may be some confusion with ".thumbnail img", "thumbimage". and "thum img". Are all three separately being used correctly, as you laid them out?

At the end, instead of "thumbimage" in $(this).addClass("thumbimage"); you may want to use "thumb img".