Question

我有2张图片。我的意图是当图像完成显示并完成淡入时，我将加载一些功能。

我的问题

如何确保我的图像完全加载并显示在屏幕上？我问，因为有时候，当图像仍在加载时（就像只显示图像的一半），它会以某种方式淡出，我需要确保它在淡入之前显示完整的图像。

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

Answer 1

您可以将css display:none替换为.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/

如果您想按顺序显示图片，可以将i替换为持续时间，例如，i * 250替换.each() "fast" jsfiddle https://jsfiddle.net/88ft369z/4/ < / p>

Answer 2

您可以使用.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.
         }
      });
   });

在

2 个答案: