100% fully show image before fading in

Question

I have 2 images. My intention is when the image finished display, and finished fade in, I will load some function.

My question

How do I make sure my image is fully loaded and displayed on screen? I ask because sometimes, when the image is still loading (like only half the image is showing), it will fade in somehow, I need make sure it shows the full image before fading in.

FIDDLE

var temp = "";
var displaythumbnailbox = $(".area1");

var lis = $(".area1 img");
 //hide the image , in order to use fadein
lis.hide();
lis.each(function(i) {

  $(this).fadeIn('fast', function() {

    console.log("finish load all image");

    if (i == lis.length - 1) {

      //getting last image display.

      alert("finish display the last image");

      //going to put some function here.
    }
  });
});

Or you can use `.load(..` [refer this](http://stackoverflow.com/questions/3537469/detect-image-load) — Kartikeya Khosla, Apr 14 '16 at 05:51

guest271314 · Accepted Answer · 2016-04-14T06:10:09.560

0

You can substitute css display:none for .hide(), .ready() , .promise()

css

.area1 img {
  display:none;
}

javascript

$(document).ready(function() {
  var temp = "";
  var displaythumbnailbox = $(".area1");

  var lis = $(".area1 img") //.hide()
    .each(function(i) {
      $(this).fadeIn("fast", function() {
        console.log("finish load all image");
      });
    });

  lis.promise().then(function() {
    alert("finish display the last image");
  })
})

jsfiddle https://jsfiddle.net/88ft369z/3/

If you want to display images in sequence you can substitute i multiplied by a duration, e.g., i * 250 at .each() for "fast" jsfiddle https://jsfiddle.net/88ft369z/4/

edited Apr 14 '16 at 06:10

answered Apr 14 '16 at 05:54

guest271314

1
15
104
177

thank !~ but can i know why did you remove the lis at lis.each in the demo ? – darkness Apr 14 '16 at 06:14
@darkness _"can i know why did you remove the lis at lis.each in the demo"_ `lis.each()` was not removed; chained selector `$(".area1 img")` to `.each()`. Do you mean why `.hide()` was removed? – guest271314 Apr 14 '16 at 06:16
oh yeah i saw it ,hmm atucally there is a problem , i test on web , i didt work , i wonder why. – darkness Apr 14 '16 at 06:18
i added a function on promise , those image still loading havet finish and the function already started. – darkness Apr 14 '16 at 06:19
@darkness _"i added a function on promise , those image still loading havet finish and the function already started."_ Can you create a stacksnippets or jsfiddle to demonstrate? – guest271314 Apr 14 '16 at 06:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109110/discussion-between-darkness-and-guest271314). – darkness Apr 14 '16 at 06:22

score 0 · Answer 2 · answered Apr 14 '16 at 05:54

You can check if the element is loaded using .load().

var lis = $(".area1 img");
    lis.load(function(){
       lis.hide();
       lis.each(function(i) {

          $(this).fadeIn('fast', function(){

          console.log("finish load all image");

          if(i == lis.length -1)
          { 

             //getting last image display.

             alert("finish display the last image");

             //going to put some function here.
         }
      });
   });

100% fully show image before fading in

2 Answers2