jQuery的背景圖像加載

Question

我有一個腳本，它將大量的圖像加載到carosel效果...大約250個圖像。這些圖像本身相對較小，但在瀏覽器出現之前會合並在一起（需要大約15-20秒才能加載）。

將這些圖像加載到後臺以便瀏覽器不鎖定的最佳方式是什麼？

請溫和任何建議，因爲我是一個超級noobie！

我的劇本是這樣的：

function fanartPosterPageLoad() { 

$('#filterCount').hide(); 

var posterResultCount = 0; 
var mxKey = $.now(); 

$.get("\\php\\phpFanartPosterPageLoad.php?mxKey"+mxKey, function(posterData){ 

    posterImageResults = JSON.parse(posterData); 

    $('#listItems > li').remove(); 

    while (posterResultCount<posterImageResults.length){ 

     var posterFanartFolder = posterImageResults[posterResultCount]['Fanart_Folder_Name']; 
     var posterFanartURL = posterImageResults[posterResultCount]['URL_Path']; 
     var posterMovieID = posterImageResults[posterResultCount]['Movie_ID']; 
     var posterFanartOne = "\\Fanart\\Movies\\"; 
     var posterFanartTwo = "\\poster\\small"; 

     $("#listItems").trigger("insertItem", '<li><a href="mediaDetails.php?mxKey='+mxKey+'&movie_id='+posterMovieID+'" class="nyroModal"><img id="'+posterMovieID+'" src="'+posterFanartOne+posterFanartFolder+posterFanartTwo+posterFanartURL+'" width="167" height="250" alt="" /></a></li>'); 

     posterResultCount++; 
    } 

    $('.nyroModal').nyroModal(); 

}); 

}

感謝

Answer 1

你操作DOM每次迭代。 DOM操作非常昂貴。所以我們可以一次插入所有項目。

function fanartPosterPageLoad() { 

    $('#filterCount').hide(); 

    var mxKey = $.now(); 

    $.get("\\php\\phpFanartPosterPageLoad.php?mxKey" + mxKey, function(posterData) { 

     var images = JSON.parse(posterData), 
      image, 
      posterFanartFolder, 
      posterFanartURL, 
      posterMovieID, 
      posterFanartOne, 
      posterFanartTwo, 
      html = ''; 

     $('#listItems > li').remove(); 

     for (var i = 0, l = images.length; i < l; i++) { 

      image = images[i]; 

      posterFanartFolder = image['Fanart_Folder_Name']; 
      posterFanartURL = image['URL_Path']; 
      posterMovieID = image['Movie_ID']; 
      posterFanartOne = "\\Fanart\\Movies\\"; 
      posterFanartTwo = "\\poster\\small"; 

      html += '<li><a href="mediaDetails.php?mxKey='+mxKey+'&movie_id='+posterMovieID+'" class="nyroModal"><img id="'+posterMovieID+'" src="'+posterFanartOne+posterFanartFolder+posterFanartTwo+posterFanartURL+'" width="167" height="250" alt="" /></a></li>';   

     } 

     $("#listItems").trigger("insertItem", html); 

     $('.nyroModal').nyroModal(); 

});