加载页面并预加载所有内容

Question

我想复制 jQuery Mobile 的页面导航系统，其中你可以调用一个在向右浮动的容器中加载到 DOM 中的页面，然后将其动画化并且目前已有以下内容：http://s46264.gridserver.com/dev/dave/pageslider/。

我的问题是，我希望在调用动画语句之前预加载所有页面内容（请参见“load page 2”）。我该如何做到这一点？

迄今为止的代码：

var currPage = "one";

        function loadPage(newPage) {
            $("<div id='" + newPage + "' class='page'></div>").insertAfter('#'+currPage);
            $('#'+newPage).load('pages/' + newPage + '.php', function() {       
                $('#page_wrapper').animate({
                    left: '-400px'
                }, 200, function() {
                    $('#'+currPage).remove();
                    $('#page_wrapper').css('left',0);
                    currPage = newPage;
                });
            });
        }

        $(document).ready(function() {
            $("#page_wrapper").append("<div id='" + currPage + "' class='page'></div>");
            $('#'+currPage).load('pages/' + currPage + '.php');
        })

另外，我是一个新手，如果有关于我的方法的错误提示，请务必告诉我。

谢谢。

- dg85

---

你所拥有的脚本难道没有实现你所要求的功能吗？ - BishopZ

在他的例子中，第2页上的图像只有在div滑入时才会加载。他想知道是否可以预加载此内容，以便当页面滑入时图像已经存在。 - Berry Ligtermoet

Answer 1

请看下面的解决方案：

http://chipsandtv.com/articles/jquery-image-preload

你尝试过在预加载的DOM中遍历所有图像标签，并在内存中创建以下图像元素吗？

// images is an array with the image filenames, so you'd 
// have to extract these from the preloaded source.
$(images).each(function() {
    var image = $('<img />').attr('src', this);
});

这当然是假设.load()没有展示这种特定的行为。

- Berry Ligtermoet