JS預先載入圖片的實現

本文主要和大家分享JS預先載入圖片的實現，希望能幫助大家。

需求：專案中點選按鈕，實現切換背景圖功能。
問題：切換css的background-image屬性時，先載入圖片後顯示，會出現一瞬空白期。

解決方法：提前預先載入背景圖
首先利用Image()建構函式來建立一個螢幕外圖片對象，之後將該對象的src屬性設定URL，由於圖片元素並沒有加入到文件中，因此它是不可見的，但是瀏覽器還是會載入圖片並將其緩存起來。

function preloadImg(url){
  var imageObj = new Image()
  imageObj.src=url
}var aImgUrlList = ['image1.png', 'image2.png']for (var i of aImgUrlList)
    preloadImg(i)

相關推薦：

js預先載入圖片方法匯總_javascript技巧

以上是JS預先載入圖片的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！