Jquery прерывание каскадной загрузки изображения

Question

// 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])
        {
            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);
    });

Как видите, при загрузке страницы он начинает каскадно перемещаться по массиву, загружающему изображение, как только загружается первое.

У меня вопрос: если страниц много (скажем, 100), предварительный загрузчик может сказать индекс 10, но затем, если пользователь переходит к просмотру индекса 85, предварительный загрузчик должен прекратить загрузку из индекса 10 и запустить снова по индексу 85.

Я не совсем уверен, как остановить загрузку изображения и затем запустить его снова с другим индексом.

Answer 1

Одним из способов реализации этого является сохранение номера версии, который будет увеличиваться при каждом переходе пользователя на другую страницу.

Объявление глобальной переменной:

curVersion = 0;

Внутри вашей петли:

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

Когда пользователь переходит на другую страницу или если вы хотите остановить каскадирование, просто увеличьте curVersion, а затем (необязательно) вызовите generatePage(85), чтобы начать снова с этой страницы.