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 ops は非常に高価です。したがって、すべてのアイテムを一度に挿入できます。

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 に答える