1
JavaScript에서 이미지로드 문제가 발생했습니다. 일련의 이미지가 순차적으로로드되기를 원합니다. 즉, 이미지 1의로드가 완전히 완료되면 이미지 2의로드가 시작됩니다.이미지로드가 완료되기 전에 onLoad 이벤트가 발생합니다.
내가 발견 한 문제는 이미지로드가 완료되면 이미지가로드되기 시작하면 JavaScript onLoad 메서드가 실행되지 않는다는 것입니다. 따라서 가장 작은 이미지는 대기열에 상관없이 항상로드되는 첫 번째 이미지가됩니다. 나는 JS 피들 (HTML과 JS 코드도 아래에있다)에 a simple example of what i mean을 넣었다.
다음 이미지를로드하기 전에 이미지가 완전히로드 될 때까지 기다릴 수있는 아이디어가 있습니까? 그렇게 열심히 할 수는 없습니까?
참고 : 원래 jQuery .load 함수를 사용하여 작성했으며 동일한 결과를 얻었으므로 원래 JS에서는 엉망이었습니다.
감사
HTML 코드 :
<ul>
<li><img src="" alt="image 1" width="210" height="174"></li>
<li><img src="" alt="image 2" width="210" height="174"></li>
<li><img src="" alt="image 3" width="210" height="174"></li>
<li><img src="" alt="image 4" width="210" height="174"></li>
<li><img src="" alt="image 5" width="210" height="174"></li>
</ul>
<a href="#" id="loader">Load the images</a>
JS 코드 :
var imgArr = [
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/zine-HP-UK.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/Valentine_UK.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/crop_UK__.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/hitlist_UK--.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/chinese_new_year_UK_new_0402.jpg"
],
totalImgs = imgArr.length,
count = 0;
function onLoaded(count) {
console.log("fired onload "+count);
var currentImg = $('li:eq('+count+') img');
currentImg.attr('src', imgArr[count]).css('display','block');
count++;
if (count < totalImgs) {
loadImg(count);
};
}
function loadImg(count) {
imgObj = new Image()
imgObj.src = imgArr[count];
imgObj.onLoad = onLoaded(count);
}
$('#loader').click(function() {
loadImg(count);
});
감사합니다 Marcell 나는 onLoaded가 즉시 호출되지 않도록 onLoaded 함수가 호출되지 않도록()를 제거했습니다. 나는 정말로 어리 석고 뭔가를 정말로 근본적으로 놓치고 있는가? 변경 사항을 반영하기 위해 [JS Fiddle] (http://jsfiddle.net/Jm8MR/1/)을 편집했습니다. –
잠깐만, 내가 바보가되어 !! 나는 .onload 대신에 .onLoad를 호출했다. 지금 일하고있는 모든 사람들, Marcell에게 감사드립니다. –