立即注冊 找回密碼

QQ登錄

只需一步,快速開始

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

發(fā)布者: 美工學習 | 發(fā)布時間: 2024-1-15 21:16| 查看數(shù): 1231| 評論數(shù): 0|帖子模式

親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦!(包涵精彩圖片、文字詳情等)請您及時注冊登錄-www.bmrsportswear.com

您需要 登錄 才可以下載或查看,沒有賬號?立即注冊

x
衡量一個網(wǎng)站html" target="_blank" class="relatedlink">seo做得好不好的一個重要指標,是頁面的打開速度,而影響一張網(wǎng)頁打開速度的一個很重要的因素,是加載圖片的大小。目前網(wǎng)絡上流行的兩個優(yōu)化圖片的概念,分別是漸進式加載懶加載。一個好的網(wǎng)站,需要同時對圖片都做到漸進式加載和懶加載這兩種處理。
懶加載,意思是瀏覽器加載頁面的時候先不加載圖片,視窗滾動到能顯示圖片的位置的時候,圖片再自動加載。這樣可以避免打開頁面的同時因為要加載圖片,導致的頁面打開時間變長的問題。目前主流瀏覽器已經(jīng)都可以不用JS實現(xiàn)了,只要給圖片加上loading=”lazy”的屬性即可。wordpress基本已經(jīng)替我們自動實現(xiàn)了,只要是通過content或者thumbnail相關的函數(shù)調(diào)用的圖片,WP自動會給它們加上這個屬性:
不得不提一下,WordPress更妙的地方在于它不僅自動實現(xiàn)了懶加載,還自動實現(xiàn)了用srcset和sizes屬性在不同的屏幕尺寸上調(diào)用適合的大中小圖,避免流量浪費。這些大中小圖都是后臺預設并自動生成的,不需要你多花一分的力氣。這可是很久以前就實現(xiàn)了
接下來說漸進式加載。不同于懶加載是為了提升頁面加載速度,漸進式加載主要還是為提升觀感服務的,它并不會加快頁面打開速度,單純只是為了讓圖片加載過程顯得“好看”而已。漸進式加載圖片大致效果如下:
以前我們會用JS去調(diào)用一張模糊圖片,并監(jiān)聽原圖的加載,加載原圖完成后再替換模糊圖片顯示。你可以得出一個結(jié)論,漸進式加載由于要多加載一張模糊圖片,總的加載量反而是更多的,開銷反而變大了,F(xiàn)在有了更容易的實現(xiàn)方式,就是在導出圖片的格式上勾選一下即可,不需要再用到任何JS腳本和額外的圖片了。
以Photoshop導出JPG為例,只要保存的時候選擇“連續(xù)”,這樣的圖片放在網(wǎng)頁上,加載的時候自動會有一個模糊到清晰的效果
我們做的網(wǎng)站,對這些技術細節(jié)貫徹是很徹底的。對于圖片來說,懶加載和漸進式加載同時都要做好,同時在使用圖片之前還要對圖片的格式盡可能優(yōu)化,這樣才能保證每個頁面的加載速度。



道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題! 如果您是道勤主機用戶,那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信:q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機客服! 如果您不是我們的客戶也沒問題,點擊頁面最右邊的企業(yè)QQ在線咨詢圖標聯(lián)系我們并購買后,我們?yōu)槟赓M進行無縫搬家服務,讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機的服務!
本內(nèi)容系 道勤團隊 www.bmrsportswear.com 客服與技術人員研究整理的智慧結(jié)晶,轉(zhuǎn)載勿用于商業(yè)用途,并保留本文鏈接,侵權(quán)必究!
dsu_marcocopyright:copy_link 

【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】 - 論壇版權(quán)1、本主題所有言論和圖片純屬會員個人意見,與本論壇立場無關
2、本站所有主題由該帖子作者發(fā)表,該帖子作者與【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】享有帖子相關版權(quán)
3、其他單位或個人使用、轉(zhuǎn)載或引用本文時必須同時征得該帖子作者和【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】的同意
4、帖子作者須承擔一切因本文發(fā)表而直接或間接導致的民事或刑事法律責任
5、本帖部分內(nèi)容轉(zhuǎn)載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
6、如本帖侵犯到任何版權(quán)問題,請立即告知本站,本站將及時予與刪除并致以最深的歉意
7、【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】管理員和版主有權(quán)不事先通知發(fā)貼者而刪除本文

最新評論

關閉

道勤網(wǎng)- 推薦內(nèi)容!上一條 /2 下一條

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回復 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

關于我們|手機版|小黑屋|地圖|【道勤網(wǎng)】-www.bmrsportswear.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網(wǎng)站設計教程【道勤網(wǎng)】 ( 皖ICP備15000319號-1 )

GMT+8, 2024-10-11 19:26

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回復 返回頂部 返回列表