2
배경 이미지가 <img>이고 5 개의 별도 캔버스 레이어 (해먹의 사용자 정의 가능한 부분 5 개를 구성)은입니다. 이 이미지 3 개 모두가 각각 {display:none;} 요소에 완전히로드 될 때까지 기다린 다음 모든 이미지를 한 번에 사라지게해야합니다.모든 이미지로드 후, 이미지 태그, 이미지 오브젝트 및 배경 이미지
일부 연구를 마친 후 imagesLoaded 라이브러리를 발견했습니다. 문서에서는 배경 이미지와 이미지에 사용할 수 있지만 캔버스 이미지를로드하는 데 사용하는 이미지 개체에 대해서는 확신 할 수 없습니다.
문제 :
1) 아직 개별적으로로드하고 fadeIn은 기다리지 않습니다.
2) 콘솔에서 count은 어떤 이유로 든 홀수로 증가합니다 (예 : 1, 3, 5, 7, 11
3) 또한 이러한 이미지는로드시 이미 캐시 될 수 있습니다.
이 코드는 가장 깨끗하거나 효율적이지 않습니다. 기본 개념을 이해 한 후에 정리할 계획입니다. imagesLoaded가 가장 좋은 방법이 아니라면 무엇을 권하고 싶습니까? 나는 그저 효과있는 것을 원한다.
는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;
}
자바 스크립트 :
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);
}
}