鍍金池/ 問答/HTML/ 如何實(shí)現(xiàn)“加載完成”再跳轉(zhuǎn)？

如何實(shí)現(xiàn)“加載完成”再跳轉(zhuǎn)？

原始需求

頁(yè)面A 跳轉(zhuǎn)到 頁(yè)面B，之間加一個(gè)loading中間頁(yè)，等待頁(yè)面B的加載，等其完全加載完成，顯示頁(yè)面B。

擬定解決方案

利用iframe的onload以及瀏覽器緩存模擬實(shí)現(xiàn)

代碼如下：

<html>
    <head>
    </head>
    <body>
        正在跳轉(zhuǎn)到https://www.baidu.com
        <script>
            var iframe = document.createElement('iframe');
            iframe.src = 'https://www.baidu.com';
            iframr.style.display = 'none';
            iframe.onload = function(){
                alert('iframe loaded');
                location.replace('https://www.baidu.com');
            }
            document.body.appendChild(iframe);
        </script>
    </body>
</html>

但是發(fā)現(xiàn)，其實(shí)這種方案并不能完全滿足需求，在Chrome中發(fā)現(xiàn)跳轉(zhuǎn)到真實(shí)頁(yè)面時(shí)，很多靜態(tài)資源還是需要去請(qǐng)求的，并不是從緩存中取。

因此，是否有更好的解決方法？最好是純前端層面。

補(bǔ)充：強(qiáng)調(diào)一下，B頁(yè)面是第三方頁(yè)面，比如https://www.baidu.com

回答
編輯回答
無(wú)標(biāo)題

B 頁(yè)面打開就是一個(gè) loader，js 判斷所有靜態(tài)資源加載完成后刪除 loader

2017年5月9日 22:58
編輯回答
情已空

在B頁(yè)面初始化即打開loader， B頁(yè)面load完成后隱藏loader。

DEMO

有很多js庫(kù)的實(shí)現(xiàn)可參考:
https://ihatetomatoes.net/cre...

2018年6月1日 00:21
編輯回答
墨沫

跳轉(zhuǎn)到B頁(yè)面先顯示一個(gè)loading遮罩層動(dòng)畫，用 DOMContentLoaded 監(jiān)聽B頁(yè)面的dom元素的加載，如果加載完畢，隱藏loading遮罩層動(dòng)畫。注意DOMContentLoaded的兼容性問題，你可以考慮使用$.ready()。

2017年4月4日 16:29