資訊專欄INFORMATION COLUMN
摘要：之前一直以為圖片預加載，圖片懶加載是差不多的。下面說一下區(qū)別和突然想到的一個問題。利用圖片預加載將下一張圖片提現(xiàn)緩存下來。如果用戶滑動到下面，則下面的圖片才會加載出來，否則不會加載該圖片。
之前一直以為圖片預加載，圖片懶加載是差不多的。其實差很多，出發(fā)點就不一樣。。。。。下面說一下區(qū)別和突然想到的一個問題。
圖片預加載：事先把圖片就下載下來，當下次頁面中需要用到這個圖片的時候，就直接去讀取緩存的圖片
具體應用場景：一個輪播圖，每次點擊屏幕出現(xiàn)下一張圖片，如果網(wǎng)速不大好的情況下，可能會加載的比較慢。所以會出現(xiàn)屏幕卡頓，白屏等情況。利用圖片預加載將下一張圖片提現(xiàn)緩存下來。這樣點擊下一張的時候就會讀取緩存的圖片，而不是發(fā)起一個新的http請求了。
原理
使用javascript中的 new Image() 創(chuàng)建image對象
給這個image對象的src屬性賦值，賦值的同時瀏覽器就會請求該圖片資源。
當點擊出先下一張時，如果下一張的src和剛剛的image對象的src值相同，就會去讀取緩存。所以更加流暢了。
圖片懶加載：當用戶需要看到這一部分內(nèi)容的時候才加載圖片
具體應用場景舉例：例如淘寶天貓等商品圖片特別多，第一次打開頁面的時候不可能把所有商品圖片都加載出來，那樣頁面首屏會特別慢。于是首先只加載用戶能看見的那一部分圖片。如果用戶滑動到下面，則下面的圖片才會加載出來，否則不會加載該圖片。這樣省流量，并且首屏加載比較快。
原理：
所有的img都自定義一個data-src屬性，名字可以隨便取。這個屬性放著該圖片的地址，而且不給img添加src屬性。因為添加了src屬性即使為空，還是會有請求的。
當滑動到用戶可以看見的部分之后，將img的data-src屬性值賦值給img的src屬性，這時候img才會去加載圖片資源。
疑問：
上面的圖片預加載中的new 出來的image直接賦值src屬性就能夠加載資源了，可是在jsonp中為什么還要把script標簽append到頁面中才會發(fā)起請求呢？在js中創(chuàng)建的script直接賦值src屬性能不能立即發(fā)起請求？測試咯！
通過上面的測試，我們發(fā)現(xiàn)了使用document.createElement("script")創(chuàng)建出來的script標簽給其src賦值之后并沒有立即加載資源。而是等到添加到頁面中才加載資源。 WHY？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52583.html
摘要：之前一直以為圖片預加載，圖片懶加載是差不多的。下面說一下區(qū)別和突然想到的一個問題。利用圖片預加載將下一張圖片提現(xiàn)緩存下來。如果用戶滑動到下面，則下面的圖片才會加載出來，否則不會加載該圖片。 之前一直以為圖片預加載，圖片懶加載是差不多的。其實差很多，出發(fā)點就不一樣。。。。。下面說一下區(qū)別和突然想到的一個問題。圖片預加載：事先把圖片就下載下來，當下次頁面中需要用到這個圖片的時候，就直接去讀...
摘要：圖片的預加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結(jié)合起來放到程序中是一種不錯的選擇。 最近在做H5滑頁時，遇到一些比較大的場景，動輒二十、三十頁，而圖片更是可恨的能達到上百個，所以就會導致場景在加載的時候遇到網(wǎng)速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能導致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預加載和懶加載，記個...
摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...
閱讀 3705·2021-11-22 13:52
閱讀 3602·2019-12-27 12:20
閱讀 2385·2019-08-30 15:55
閱讀 2144·2019-08-30 15:44
閱讀 2262·2019-08-30 13:16
閱讀 574·2019-08-28 18:19
閱讀 1881·2019-08-26 11:58
閱讀 3436·2019-08-26 11:47
