Question

我正在尝试复制jQuery Mobile的页面导航系统，您可以在其中调用一个页面，该页面在向右浮动的容器中加载到dom中，然后进行动画处理并具有以下内容：http://s46264.gridserver.com/dev/dave/pageslider/ < / p>

我的问题是我想在调用animate语句之前预先加载所有页面内容（请参阅第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');
        })

另外，我很新，所以我的方法中的错误提示都很受欢迎。

由于

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()尚未显示此特定行为。

.load（）页面并预加载所有内容

1 个答案: