1

我有一个脚本，可以将大量图像加载到轮播效果中……大约 250 张图像。这些图像本身相对较小，但组合起来会在它们出现之前锁定浏览器（加载大约需要 15-20 秒）。

让这些图像在后台加载以使浏览器不会锁定的最佳方法是什么？

请对任何建议保持温和，因为我是一个超级新手！！！

我的脚本如下所示：

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

});

}

谢谢

4

1 回答 1

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

});
于 2013-01-06T14:41:20.497 回答