在所有图像加载后，图像标签，图像对象和背景图像

我有一个背景图像，一个<img>和5个单独的画布层(构成吊床的5个可定制部分)。我需要等待所有这3个图像完全加载到各自的{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);
    }
}