用于 iPhone 的 jQuery 预加载图像答案

【问题标题】：jQuery preload images for iPhone用于 iPhone 的 jQuery 预加载图像
【发布时间】：2011-02-14 17:52:16
【问题描述】：

            // After a page turn
            after: function(opts) {

                var currPageIndex = opts.curr - 1;

                generatePage(currPageIndex);            // This page
                generatePage(currPageIndex + 1);        // Right side page
                generatePage(currPageIndex + 2);
                generatePage(currPageIndex + 3);
            } 
        });
    });

    // Generates the page
    function generatePage(pageID){               

        // Check not already loaded
        if(pageID >= 0 && pageID < arrPages.length && !arrPages[pageID][2])
        {
            arrPages[pageID][2] = true;
            $('#page' + pageID).html('<img src="<%=strProjectPath%>/pages/originals/' + arrPages[pageID][1] + '" alt="Page image" />');
        }
    }

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

如您所见，当文档准备好时，会生成页面 0、1 和 2。 0 是立即可见的图像，然后在翻页时预加载 1 和 2。

当他们翻页时，它会加载他们正在查看的当前两页（以防直接跳过且未预加载）和接下来的两页。

如何调整加载，使其首先加载可立即查看的页面？您可以使用 Jquery onload 来排队下一页吗？目前 4 个页面理论上可以同时加载它们的图像，这在移动设备上会很慢。

【问题讨论】：

标签： jquery preloading

【解决方案1】：

当然，您可以使用jQuery load()，但是您不应该立即添加所有图像。例如，您可以这样排列它们：

var preload = function (pageID, rest) {
    $('#page' + pageID).append(
        $('<img/>', {
            src: "<%=strProjectPath%>/pages/originals/' + arrPages[pageID][1] + '"
        }).load(function () {
            rest.length && preload(rest[0], rest.splice(1));
        })
    );
};

【讨论】：