使用jQuery預加載圖像：錯誤處理程序始終調用

我正在構建一個圖庫滑塊腳本，並嘗試在將圖像附加到圖庫前預先全部預加載圖像。使用jQuery預加載圖像：錯誤處理程序始終調用

我的設計應做到以下幾點：

負荷的圖像，並把它們添加到DOM到一個無形的preloadContainer。
如果加載成功，加載一個回調函數，檢查所有圖像是否已經預加載（「noOfPreloadedImages ++; if（noOfPreloadedImages == noOfImagesToLoad）...」）。
如果加載失敗，因爲圖像資源不可用，請調用錯誤回調函數。

這是一個複雜的，「完全版」我的代碼：現在

   $('<img />') 
       .attr({'src': galleries[i].slides[j].imageUrl, 'id': 'galleryImg'+j}) 
       .on('load', checkPreloadComplete(i)) 
       .on('error', checkPreloadError(i, j)) 
       .attr({'src': galleries[i].slides[j].imageUrl, 'id': 'galleryImg'+j}) 
       .appendTo(preloadContainers[i]) 
       .wrap('<div id="slide'+j+'" class="slide" />');

，問題是，錯誤回調總是被調用。我試着玩功能鏈，但沒有成功。

所以，這裏是一個小的測試代碼也總是拋出一個錯誤，不管圖像資源是否可用：

$(function() { 

$(document).ready(function() { 
    $("<img />") 
    .attr({'src': 'http://www.google.de/images/srpr/logo11w.png'}) 
    .on('error', errorHandler()) 
    .appendTo('body'); 
}); 

function errorHandler() { 
    console.log("Error loading image."); 
}; 

});

這裏是一個的jsfiddle：http://jsfiddle.net/SvenS/FhYQ8/

什麼我做錯了嗎？我的思想在哪裏錯了？

[編輯]

好吧，那很奇怪。一些意見：

這總是觸發一個錯誤/成功：

$(function() { 

$(document).ready(function() {  
    var test = $("<img />").appendTo('body'); 
    test.on('error', errorHandler()); 
    test.on('load', successHandler()); 
    test.attr({'src': 'http://www.google.de/images/srpr/logo11w.png'}); 
}); 

function errorHandler() { 
    console.log("Error loading image!"); 
}; 

function successHandler() { 
    console.log("Image loaded successfully!"); 
} 

});

但這裏是工作的，奇怪的是：

$(function() { 

    $(document).ready(function() {   
     var test = $("<img />").appendTo('body'); 
     test.on('error', function(e) { errorHandler(); }); 
     test.on('load', function(e) { successHandler(); }); 
     test.attr({'src': 'http://www.google.de/images/srpr/logo11w.png'}); 
    }); 

    function errorHandler() { 
     console.log("Error loading image!"); 
    }; 

    function successHandler() { 
     console.log("Image loaded successfully!"); 
    } 

});

我真的不明白爲什麼，也許有人更深入的瞭解可以幫助我......？

來源

2013-10-13 Sven S

這並不意味着它不能完成，但我從來沒有見過附加到DOM對象的錯誤處理程序。

如何在頁面的onload事件中執行$.ajax()？然後，您可以將正確的回調附加到相應的事件中。

來源

2013-10-13 02:14:46 Vidya

-1

我寫了一個完美的圖像預加載模塊。它使用普通的舊JavaScript，這意味着您可以在jQuery加載之前開始預加載圖像。它也會觸發回調，如果你願意的話，在發起你的回調之前會等待jQuery加載。檢查出來，並讓我知道，如果你最終使用它：http://test.neilgirardi.com/

上面的URL包含一個演示，預載3.1MB的圖像和觸發一個jQuery .cycle（）幻燈片作爲回調。

來源

2013-10-13 03:53:20

謝謝你的鏈接，你寫了一個偉大的腳本！希望能夠編寫Javascript-without-jQuery，還有很多東西需要學習。無論如何，我最終在「[編輯]」下使用了我的「解決方案」，儘管我不明白它爲什麼起作用。 –

不錯的作品斯文。你做到了正確的方式。關鍵是創建DOM元素，綁定回調，然後設置源。它必須按照這個順序來完成。 –

鏈接不加載 – AllisonC

使用jQuery預加載圖像：錯誤處理程序始終調用

回答

相關問題