關(guān)于網(wǎng)站圖片的漸進(jìn)式加載和懶加載的實(shí)現(xiàn)的方法

美工學(xué)習(xí)

衡量一個(gè)網(wǎng)站html" target="_blank" class="relatedlink">seo做得好不好的一個(gè)重要指標(biāo)，是頁(yè)面的打開速度，而影響一張網(wǎng)頁(yè)打開速度的一個(gè)很重要的因素，是加載圖片的大小。目前網(wǎng)絡(luò)上流行的兩個(gè)優(yōu)化圖片的概念，分別是漸進(jìn)式加載和懶加載。一個(gè)好的網(wǎng)站，需要同時(shí)對(duì)圖片都做到漸進(jìn)式加載和懶加載這兩種處理。

懶加載，意思是瀏覽器加載頁(yè)面的時(shí)候先不加載圖片，視窗滾動(dòng)到能顯示圖片的位置的時(shí)候，圖片再自動(dòng)加載。這樣可以避免打開頁(yè)面的同時(shí)因?yàn)橐�加載圖片，導(dǎo)致的頁(yè)面打開時(shí)間變長(zhǎng)的問題。目前主流瀏覽器已經(jīng)都可以不用JS實(shí)現(xiàn)了，只要給圖片加上loading=”lazy”的屬性即可。wordpress基本已經(jīng)替我們自動(dòng)實(shí)現(xiàn)了，只要是通過content或者thumbnail相關(guān)的函數(shù)調(diào)用的圖片，WP自動(dòng)會(huì)給它們加上這個(gè)屬性：

不得不提一下，WordPress更妙的地方在于它不僅自動(dòng)實(shí)現(xiàn)了懶加載，還自動(dòng)實(shí)現(xiàn)了用srcset和sizes屬性在不同的屏幕尺寸上調(diào)用適合的大中小圖，避免流量浪費(fèi)。這些大中小圖都是后臺(tái)預(yù)設(shè)并自動(dòng)生成的，不需要你多花一分的力氣。這可是很久以前就實(shí)現(xiàn)了

接下來說漸進(jìn)式加載。不同于懶加載是為了提升頁(yè)面加載速度，漸進(jìn)式加載主要還是為提升觀感服務(wù)的，它并不會(huì)加快頁(yè)面打開速度，單純只是為了讓圖片加載過程顯得“好看”而已。漸進(jìn)式加載圖片大致效果如下：

以前我們會(huì)用JS去調(diào)用一張模糊圖片，并監(jiān)聽原圖的加載，加載原圖完成后再替換模糊圖片顯示。你可以得出一個(gè)結(jié)論，漸進(jìn)式加載由于要多加載一張模糊圖片，總的加載量反而是更多的，開銷反而變大了。現(xiàn)在有了更容易的實(shí)現(xiàn)方式，就是在導(dǎo)出圖片的格式上勾選一下即可，不需要再用到任何JS腳本和額外的圖片了。

以Photoshop導(dǎo)出JPG為例，只要保存的時(shí)候選擇“連續(xù)”，這樣的圖片放在網(wǎng)頁(yè)上，加載的時(shí)候自動(dòng)會(huì)有一個(gè)模糊到清晰的效果

我們做的網(wǎng)站，對(duì)這些技術(shù)細(xì)節(jié)貫徹是很徹底的。對(duì)于圖片來說，懶加載和漸進(jìn)式加載同時(shí)都要做好，同時(shí)在使用圖片之前還要對(duì)圖片的格式盡可能優(yōu)化，這樣才能保證每個(gè)頁(yè)面的加載速度。

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！