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

});

jquery背景加载图像

1 个答案: