javascript - 淡入前 100% 完全显示图像

Question

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

我的问题

如何确保我的图像已完全加载并显示在屏幕上？我问这个问题是因为有时，当图像仍在加载时(例如仅显示一半图像)，它会以某种方式淡入，我需要确保它在淡入之前显示完整图像。

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

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 乘以持续时间来代替，例如 .each() 处的 i * 250 > 对于“快速” jsfiddle https://jsfiddle.net/88ft369z/4/