在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

原始需求

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

擬定解決方案

利用iframe的onload以及瀏覽器緩存模擬實現(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)，其實這種方案并不能完全滿足需求，在Chrome中發(fā)現(xiàn)跳轉(zhuǎn)到真實頁面時，很多靜態(tài)資源還是需要去請求的，并不是從緩存中取。

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

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

回答
編輯回答
無標題

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

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

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

DEMO

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

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

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

2017年4月4日 16:29