CODEWITHSUNDEEP
jquery
jaminben
jaminben

Reputation: 149

jquery background loading of images

I have a script which loads a lot of images into a carosel effect... roughly 250 images. These images on their own are relatively small but combined will lockup the browser before they appear (takes about 15-20 seconds to load).

What would be the best way to have these images load in the background so the browser doesn't lockup?

Please be gentle with any suggestions as I'm a mega noobie!!!

My script looks like this:

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

});

}

Thanks

Upvotes: 1

Views: 120

Answers (1)

sbmaxx
sbmaxx

Reputation: 886

You operate the DOM each iteration. DOM ops are very expensive. So we could insert all item at once.

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

});

Upvotes: 1

Related Questions