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个孩子，它们总是会一起淡入淡出。

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

1 个答案: