javascript圖片預載入簡單介紹
圖片預載入效果在大量的網站都有使用,特別是使用圖片較多的網站,下面就介紹一下圖片預載入的作用和用法。
比如一個網站,上面有很多這樣的效果,當滑鼠放在一個圖片的時候,能夠切換成另一張圖片,如果圖片在本地沒有快取的,需要從伺服器下載的話,那麼可能記載需要一段的事件,那麼將會影響使用者體驗,如果將圖片事先下載快取起來,就可以實現快速切換了。
下面就介紹一下如何實現圖片預載入:
[JavaScript] 純文字檢視 複製程式碼var imagePreload=new Image(); imagePreload.src="001.gif"; imagePreload.src="002.gif"; imagePreload.src="003.gif";
以上程式碼就可以實現圖片預載入,因為當執行到imagePreload.src="001.gif"這樣的語句的時候,就會從伺服器下載圖片,這樣圖片就會被存入快取,然後再下載第二個,如此進行下去。不過上面的程式碼比較適合於少量圖片預載入。
大量圖片預載入可以使用如下程式碼:
[JavaScript] 純文字檢視 複製程式碼function imagePreload(){ var imgPreload=new Image(); for(i=0;i<arguments.length;i++) { imgPreload.src = arguments<i>; } } imagePreload('001.gif','002.gif','003.gif','004.gif'); </i>
相關文章
- JavaScript 簡單介紹JavaScript
- 簡單介紹克隆 JavaScriptJavaScript
- 預載入圖片
- 簡單介紹JavaScript閉包JavaScript
- Android常用圖片載入庫介紹及對比Android
- Fresco圖片載入的簡單應用
- 圖片預載入和懶載入
- JavaScript return語句簡單介紹JavaScript
- JavaScript希爾排序簡單介紹JavaScript排序
- HTML5獲取圖片的原始高度簡單介紹HTML
- 簡單介紹Vue實現滑鼠懸浮切換圖片srcVue
- ARouter簡單入門和介紹
- 單張圖片懶載入
- Reacvt-Native 圖片下載使用介紹
- Android兩種簡單的載入GIF圖片的方法Android
- 頁面圖片預載入與懶載入策略
- 圖片預載入,圖片懶載入,和jsonp中的一個疑問JSON
- EVE-NG簡單入門介紹
- JavaScript圖片簡單等比例縮放JavaScript
- 簡單介紹下各種 JavaScript 解析器JavaScript
- 簡單的圖神經網路介紹神經網路
- RPC簡單介紹RPC
- Python簡單介紹Python
- KVM簡單介紹
- RMI簡單介紹
- HTML簡單介紹HTML
- HTML 簡單介紹HTML
- CSS 簡單介紹CSS
- ajax簡單介紹
- SVG簡單介紹SVG
- Clickjacking簡單介紹
- 【Pandas】簡單介紹
- Map簡單介紹
- JSON簡單介紹JSON
- ActiveMQ簡單介紹MQ
- 如何實現圖片預載入和載入進度條
- 載入失敗使用預設圖片替代
- ECMAScript擴充套件 -12 【圖片的預載入與懶載入】套件
- Git_簡單介紹Git