web網頁載入提示

2021-09-26 22:53:07 字數 1362 閱讀 5235

作為一名web開發者,或多或少都會接觸到網頁載入圈這個概念。乙個**的載入速度或快或慢,而慢的網頁載入速度會給使用者非常差的體驗,這個時候如果不給使用者一點提示資訊,那樣效果很不好。因此,常見的做法,是在頁面載入完成之前,給乙個過渡效果。那麼怎麼實現這種效果呢?

dom給我們提供了這樣乙個方法document.onreadystatechange。當乙個文件的readystate屬性發生更改時,readystatechange事件會被觸發。document.readystate有兩個值,interactive和completeinteractive狀態表示文件已經完成載入,文件已被解析,但是諸如影象,樣式表和框架之類的子資源仍在載入。complete狀態則表示頁面載入結束。那麼我們可以在頁面上寫乙個提示資訊,當document.readystate變為complete狀態就隱藏這個提示,這樣就可以達到乙個過渡的效果了。

我們從最簡單的開始,可以給使用者乙個文字提示,比如「loading…」。那麼**怎麼寫呢?

第一步,在body中繪製載入提示。

loading...

第二步,給提示內容乙個居中的樣式效果。在style標籤中寫樣式

#loading

開啟該html頁面,我們可以看到初步的效果

利用document.onreadystatechange方法監聽頁面載入狀態,當document.readystate變為complete狀態就隱藏載入提示。加入script標籤,寫入以下**。

document.onreadystatechange = () =>

};

重新整理html頁面,我們可以看到,當頁面載入完成時,提示內容自動消失了。(由於資源快取的關係,第二次的效果不會太明顯,可以清空快取觀察效果。)

網上有很多載入圈的gif,將上述文字內容換成gif就可以做到。也可以使用靜態,然後通過css3動畫來做一些載入效果,如rotate旋轉

#loading

@keyframes rotate

100%

}

其實我們可以利用css3自定義載入效果,把我們想要的效果通過動畫做出來即可。下面我們來實現乙個圓弧載入效果。只要將背景圖換成box-shadow效果即可

border-radius: 50%;

box-shadow: 2px 0 black;

animation: rotate 1.5s ease-out infinite;

pyqt5載入web網頁

class mainwindow qmainwindow def init self super qmainwindow,self init self.setwindowtitle 開啟網頁例子 相當於初始化這個載入web的控制項 self.browser qwebenginerview 載入外部頁...

頁面載入提示

var pageheight document.documentelement.clientheight var pagewidth document.documentelement.clientwidth 計算loading框距離頂部和左部的距離 loading框的寬度為215px,高度為61px...

web提示問題

1.針對ie可在登錄檔 hkey current user software microsoft internet explorer protocolexecute下新建項 並增加乙個名稱為 warnonopen 的dword型別鍵值,值為0不會有提示 值為1有提示 3.360瀏覽器極速模式下 開啟...