onLoad事件在圖像加載完成之前觸發

我在使用JavaScript加載圖像時遇到了一些問題。我想要一系列圖像順序加載，即圖像2僅在圖像1完全加載完成時纔開始加載。onLoad事件在圖像加載完成之前觸發

我發現的問題是，當圖像加載完成後，圖像開始加載時，JavaScript onLoad方法不會觸發。因此，無論隊列中的哪個位置，最小的圖像總是首先加載。我已經在JS小提琴中放置了a simple example of what i mean（HTML和JS代碼也在下面）。

任何想法，我可以等待，直到圖像完全加載之前開始加載下一個 - 它不能那麼難肯定嗎？

注：我最初寫它使用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); 
    });

來源

2013-02-06 El Guapo

這裏的問題是，不處理函數分配給onload事件Image但回報值爲onLoaded。您需要說imgObj.onload = onLoaded;對於currentImg，您可以使用this作爲處理程序將在Image對象上調用。爲了傳遞其他參數，需要一種替代方法。

來源

2013-02-06 17:16:15 marekful

感謝Marcell我刪除了（）以便onLoaded不會立即調用，但現在onLoaded函數根本不會被調用。我真的很愚蠢，錯過了一些真正重要的東西嗎？我已編輯[JS的小提琴]（http://jsfiddle.net/Jm8MR/1/），以反映該變化。 –

掛上，這是我是一個白癡！我正在調用'.onLoad'而不是'.onload'。現在所有人都在工作，謝謝Marcell。 –

我相信你從這個錯誤中看到有人問在2歲前移動了;儘管如此，我認爲爲了別人的利益，我會指出我認爲是你的錯誤。您使用的是imgObj.onLoad而不是imgObj.onload。 Javascript區分大小寫，並且沒有原生的「onLoad」事件。

當你解決這個問題時，代碼的其餘部分應該工作得很好。

來源

2015-04-17 05:41:12 user3607612

onLoad事件在圖像加載完成之前觸發

回答

相關問題