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)从该页面重新开始。

Jquery中断级联图像加载

1 个答案: