Jquery interrupt cascading image load

// Data array of pages    
var arrPages = [];    
arrPages[0] = new Array (2578, '1.jpg', false);    
arrPages[1] = new Array (2579, '2.jpg', false);    
arrPages[2] = new Array (2580, '3.jpg', false);    
arrPages[3] = new Array (2581, '4.jpg', false);    
arrPages[4] = new Array (2582, '5.jpg', false);    

        // Generates the page
    function generatePage(pageID){
        var newImage;
        // Check not already loaded
        if(pageID >= 0 && pageID < arrPages.length && !arrPages[pageID][2])
     开发者_JAVA百科   {
            newImage = $('<img class="pageImg" id="imgA' + pageID + '" src="
                      <%=strProjectPath%>/pages/thumbnails/' + 
                       arrPages[pageID][1] + '" alt="Page image" />');
            $('#page' + pageID).append(newImage);                                
            $('#imgA' + pageID).load(function() {
                alert("loaded");
                arrPages[pageID][2] = true;
                generatePage(pageID + 1, false);
            });
        }
    }

    // Load first page
    $(document).ready(function() {
        updateOrientation();
        generatePage(0);
    });

As you can see, on page load it starts cascading through the array loading the image once the first one loads.

My question is, if there are a lot of pages (say 100), the preloader might get to say index 10, but then if the user skips to view index 85 the preloader needs to stop loading from index 10, and start again at index 85.

I'm not quite sure how to stop the image loading and then start it up again at a different index.

One way to implement this is using storing a "version" number, that will be increased every time the user navigates to a different page.

Declare a global variable:

curVersion = 0;

Inside your loop:

var func = function(ver){
    return function() {
        alert("loaded");
        arrPages[pageID][2] = true;

        //Check if we still need to casecade
        if(curVersion == ver) {
            generatePage(pageID + 1, false);
        }
    };
}(curVersion);

$('#imgA' + pageID).load(func);

When the user navigates to a different page, or should you want to stop the cascading simply increment curVersion, then (optionally) call generatePage(85) to start again from that page.