jquery background loading of images
<p>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).</p>

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

<p>Please be gentle with any suggestions as I'm a mega noobie!!!</p>

<p>My script looks like this:</p>

<pre><code>function fanartPosterPageLoad() {

$('#filterCount').hide();

var posterResultCount = 0;
var mxKey = $.now();

$.get("\\php\\phpFanartPosterPageLoad.php?mxKey"+mxKey, function(posterData){

    posterImageResults = JSON.parse(posterData);

    $('#listItems &gt; li').remove();

    while (posterResultCount&lt;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", '&lt;li&gt;&lt;a href="mediaDetails.php?mxKey='+mxKey+'&amp;movie_id='+posterMovieID+'" class="nyroModal"&gt;&lt;img id="'+posterMovieID+'" src="'+posterFanartOne+posterFanartFolder+posterFanartTwo+posterFanartURL+'" width="167" height="250" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;');

        posterResultCount++;
    }

    $('.nyroModal').nyroModal();

});
</code></pre>

<p>}</p>

<p>Thanks</p>
