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(); 

});