I have a hard time getting my head around how image preloaders work 在Java指令碼中.因此,如果有人可以用一个很有帮助的例子来說明他们的工作方式。 没有jquery
最新回復
- 5月前1 #
相似問題
- javascript:仅使用網址而不打開新視窗来print網頁?javascripthtml2021-01-11 23:26
- javascript:在文字區域或文字輸入中多色文字突出顯示javascripthtmlcsshtml5css32021-01-11 23:28
- html:在<img>或<br>標記等的末尾是否需要" /"?htmlhtml5image2021-01-11 23:25
- javascript:从另一个頁面获取Bootstrap的模式內容javascriptjqueryhtmltwitterbootstrapmodaldialog2021-01-11 22:55
- javascript:通過單击外部關闭divjavascriptjqueryhtml2021-01-11 22:24
- html:JavaScript yAML解析器javascripthtmlparsingyaml2021-01-11 21:25
Loading a single image
瀏覽器將異步載入圖像...意味着向瀏覽器提供
.src
圖片,它將開始在後台載入该圖片,但是在.src
之後也会直接繼續處理javascript代碼警報將在圖像完全載入並可以使用之前顯示。
那麼您如何知道圖像何時完全載入並可以使用?
答案:您可以告诉瀏覽器在完成圖像載入後對其进行"回撥".通過在圖像物件上添加" img.onload"函式,您会得到"回撥".每当瀏覽器完成圖像載入時,瀏覽器都会觸發" img.onload"功能中的代碼。
完整的圖像載入過程將按以下順序进行:
Pre-loading multiple images
要預載入多张圖片:
Create an array to hold all your image URLs and add your image URLs to this array.
建立一个陣列来儲存所有圖像物件(==您的實際圖像).
添加
new Image
元素添加到圖像物件陣列(添加一个new Image
對於網址陣列中的每个網址).設置每个圖像物件的
.onload
回撥到同一函式。使用圖像URL陣列設置
.src
每张圖片的網址。在
theImageHasFinishedLoading
回撥,每次成功載入新圖像時都增加一个計數器。当計數器達到与圖像URL陣列相同的长度時,您將知道所有圖像都已完全載入。
Here's a full example code and a Demo: