Question

如果您从网页A转到网页B，我的客户想要动画。动画位于第A页（其jquery / css）。

他们希望在B页显示之前完成动画（需要约900毫秒）。

我想使用传递时间（~900msecs）到预加载页面B.

优选地，页面B确实是不同的页面;不是我用ajax加载并插入到html dom中的东西。理想情况下，我预先加载了一些东西，当我去那里时，webbrowser知道它可以使用预加载版本而不需要做任何新的http请求（至少对于html页面本身而言）。

我可以用jquery的缓存开始尝试;或者iframe;或者数据uris，并密切关注http请求。但是，有没有经过测试和尝试的方法？

Answer 1

YMMV，当然不是crossbrowsertested，但你可以显然只是加载ajax并用加载的数据替换当前文档： Replace current page with ajax content

所以......可读的版本将是

var newpage = '';

function danceAndLoad(url) {
    loadNewPage(url);
    while (!newpage) dance();
    insertNewPage();
}

function loadNewPage(url) {
    $.ajax({
        url: url
    }).done(function( data ) {

        // add a base href if needed
        newpage=data.replace('<head>','<head><base href="'+canonize(url)+'/" />');

    });



}

function insertNewPage() {

    document.open();
    document.write(newpage);
    document.close();

    // rewrite history if needed
    var ttltag = data.substring(data.indexOf("<title"), data.indexOf("</title>") + 8);
    var ttlm = /title>([^<]*)</gi.exec(ttltag);
    var title = (ttlm)?ttlm[1]:'';
    window.history.pushState(null, title, canonize(url));
    window.onpopstate=function(evt) {
        document.location.reload()
    };

}

欢迎提出任何意见或改进

在网页之间导航时，显示退出动画，并预加载下一页

1 个答案: