圖片利用 new Image()預載入原理
阿新 • • 發佈:2018-12-07
if (document.images) {
console.log(document.images)
img1 = new Image();
img2 = new Image();
img3 = new Image();
console.log(img1, img2, img3)
img1.src = "./images/logo.png";
img2.src = "./images/coding-net-ad.jpg";
img3.src = "./images/coding-net-ad.jpg";
document.getElementById('one').src = img1.src
直接new image()圖片物件,
img1 = new Image();
img2 = new Image();
img3 = new Image();
然後把地址放在圖片物件上 (圖片物件 img1 img2 img3)
img1.src = "./images/logo.png";
img2.src = "./images/coding-net-ad.jpg";
img3.src = "./images/coding-net-ad.jpg";
最後 把頁面圖片上的地址修改為圖片物件上的地址就可以了,實現預載入不用每次都載入請求了。
封裝使用 延遲預載入時間,知道頁面載入結束,上訴程式碼封裝後,判斷是否window.onload是否結束,結束接呼叫函式即可。
二:預載入和懶載入的區別
預載入與懶載入,我們經常經常用到,這些技術不僅僅限於圖片載入,我們今天討論的是圖片載入:
圖片預載入:顧名思義,圖片預載入就是在網頁全部載入之前,提前載入圖片。當用戶需要檢視時可直接從本地快取中渲染,以提供給使用者更好的體驗,減少等待的時間。否則,如果一個頁面的內容過於龐大,沒有使用預載入技術的頁面就會長時間的展現為一片空白,這樣瀏覽者可能以為圖片預覽慢而沒興趣瀏覽,把網頁關掉,這時,就需要圖片預載入。當然這種做法實際上犧牲了伺服器的效能換取了更好的使用者體驗。
圖片懶載入(緩載):延遲載入圖片或符合某些條件時才載入某些圖片。這樣做的好處是減少不必要的訪問資料庫或延遲訪問資料庫的次數,因為每次訪問資料庫都是比較耗時的即只有真正使用該物件的資料時才會建立。懶載入的主要目的是作為伺服器前端的優化,減少請求數或延遲請求數。
二、圖片預載入與懶載入的區別:
兩者的行為是相反的,一個是提前載入,一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用,預載則會增加伺服器前端壓力。
預載入與懶載入,我們經常經常用到,這些技術不僅僅限於圖片載入,我們今天討論的是圖片載入:
圖片預載入: 顧名思義,圖片預載入就是在網頁全部載入之前,提前載入圖片。當用戶需要檢視時可直接從本地快取中渲染,以提供給使用者更好的體驗,減少等待的時間。否則,如果一個頁面的內容過於龐大,沒有使用預載入技術的頁面就會長時間的展現為一片空白,這樣瀏覽者可能以為圖片預覽慢而沒興趣瀏覽,把網頁關掉,這時,就需要圖片預載入。當然這種做法實際上犧牲了伺服器的效能換取了更好的使用者體驗。
圖片懶載入(緩載):延遲載入圖片或符合某些條件時才載入某些圖片。這樣做的好處是減少不必要的訪問資料庫或延遲訪問資料庫的次數,因為每次訪問資料庫都是比較耗時的即只有真正使用該物件的資料時才會建立。懶載入的主要目的是作為伺服器前端的優化,減少請求數或延遲請求數。
二、圖片預載入與懶載入的區別:
兩者的行為是相反的,一個是提前載入,一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用,預載則會增加伺服器前端壓力。