毕竟，图像加载、图像标记、图像对象和背景图像

Question

我有一个背景图像，一个<img>，和5个独立的画布层(组成5个可定制的部分所示的吊床)。我需要等待这些映像全部加载到它们各自的{display:none;}元素中，然后立即淡出它们。

经过一番研究，我发现了图书馆的imagesLoaded。在文档中，我知道我可以将它用于一个和一个背景图像，但是我不确定一个图像对象(我用它来加载画布图像)。

问题：

1)它仍然单独加载它们，fadeIn不等待。

2)在控制台中，count以奇数递增，原因如下: 1、3、5、7、11

3)此外，任何这些图像都可以在加载时缓存。

我知道这段代码不是最干净或最有效的。我打算把基本概念弄清楚后再把它清理干净。如果imagesLoaded不是最好的方法，你会推荐什么？我只想要有用的东西。

JSFiddle

HTML：

<div id="container">
<div id="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Dell_Logo.png"/></div>
<canvas id="canvas1" width="1000" height="1000"></canvas>
<canvas id="canvas2" width="1000" height="1000"></canvas>
<canvas id="canvas3" width="1000" height="1000"></canvas>
<canvas id="canvas4" width="1000" height="1000"></canvas>
<canvas id="canvas5" width="1000" height="1000"></canvas>
</div>

CSS：

#container {
  height:1000px;
  width:1000px;
  position: relative;
  display:none;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}
#logo {
  width: 200px;
  height: 200px;
  position:absolute;
  top: 50px;
  left: 400px;
}
img {
  max-width: 100%;
}
#canvas1 {
  position: absolute;
  top:0;
  left:0;
  display:none;
}
#canvas2 {
  position:absolute;
  top:0;
  left:0;
  display:none;
}
#canvas3 {
  position:absolute;
  top:0;
  left:0;
  display:none;
}
#canvas4 {
  position:absolute;
  top:0;
  left:0;
  display:none;
}
#canvas5 {
  position:absolute;
  top:0;
  left:0;
  display:none;
}

JavaScript：

var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var canvas3 = document.getElementById('canvas3');
var canvas4 = document.getElementById('canvas4');
var canvas5 = document.getElementById('canvas5');
var context1 = canvas1.getContext('2d');
var context2 = canvas2.getContext('2d');
var context3 = canvas3.getContext('2d');
var context4 = canvas4.getContext('2d');
var context5 = canvas5.getContext('2d');

var count = 0;

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();

img1.src = 'https://cdn.shopify.com/s/files/1/1408/4812/t/11/assets/single-side-main-burgundy.png';
img2.src = 'https://cdn.shopify.com/s/files/1/1408/4812/t/11/assets/single-side-secondary-aqua.png';
img3.src = 'https://cdn.shopify.com/s/files/1/1408/4812/t/11/assets/single-side-pouch1-aqua.png';
img4.src = 'https://cdn.shopify.com/s/files/1/1408/4812/t/11/assets/single-side-pouch2-aqua.png';
img5.src = 'https://cdn.shopify.com/s/files/1/1408/4812/t/11/assets/single-side-pouch3-aqua.png';


$("#container").css("background-image", "url(http://www.hotel-r.net/im/hotel/ba/house-3.jpg)"); 
img1.onload = function() {
  context1.drawImage(img1, 0 , 0, 1000, 1000);
}
img2.onload = function() {
  context2.drawImage(img2, 0 , 0, 1000, 1000);
}
img3.onload = function() {
  context3.drawImage(img3, 0 , 0, 1000, 1000);
}
img4.onload = function() {
  context4.drawImage(img4, 0 , 0, 1000, 1000);
}
img5.onload = function() {
  context5.drawImage(img5, 0 , 0, 1000, 1000);
}

function fadeInAll(speed) {
  $("#container").fadeIn(speed);
  $("#canvas1").fadeIn(speed);
  $("#canvas2").fadeIn(speed);
  $("#canvas3").fadeIn(speed);
  $("#canvas4").fadeIn(speed);
  $("#canvas5").fadeIn(speed);
  $('#logo').fadeIn(speed);
}

$('#container').imagesLoaded( { background: true }, function() {
  count++;
  afterAllLoading();
});
$('#logo').imagesLoaded( function() {
  count++;
  afterAllLoading();
});
$('img1').imagesLoaded( function() {
  count++;
  afterAllLoading();
});
$('img2').imagesLoaded( function() {
  count++;
  afterAllLoading();
});
$('img3').imagesLoaded( function() {
  count++;
  afterAllLoading();
});
$('img4').imagesLoaded( function() {
  count++;
  afterAllLoading();
});
$('img5').imagesLoaded( function() {
  count++;
  afterAllLoading();
});

function afterAllLoading() {
        console.log(count++);
    if (count >= 7) {
        fadeInAll(1000);
    }
}

Answer 1

具有讽刺意味的是，您的问题在于console.log(count++)。这也会增加count，使其在需要之前命中7。因此，在调用fadeInAll方法时，只有一半的图像将被加载。你应该打电话给console.log(count)。

这可能有效--但我建议简化代码，只在所有画布周围设置一个父容器元素，然后将父容器的display设置为none。然后，您只需要担心一个父元素的输入和输出，而不是7个子元素，它们总是一起消失。