Chrome75原生支持圖片懶加載

??懶加載是一種在頁(yè)面加載時(shí)延遲加載一些非關(guān)鍵資源的技術(shù)吏颖,換句話(huà)說(shuō)就是按需加載。對(duì)于圖片來(lái)說(shuō)恨樟,非關(guān)鍵通常意味著離屏半醉。當(dāng)我們?cè)谑褂媚承﹫D片量比較大的網(wǎng)站時(shí),如果向下滑動(dòng)的速度過(guò)快劝术,我們可以看到新出現(xiàn)在可視區(qū)域內(nèi)的圖片從占位圖變成實(shí)際圖片的過(guò)程缩多。
我們之前看到的懶加載一般是這樣的形式:
??1.瀏覽一個(gè)網(wǎng)頁(yè),準(zhǔn)備往下拖動(dòng)滾動(dòng)條养晋,下方圖片為占位圖衬吆;
??2.快速向下拖動(dòng),可以看到一個(gè)占位圖片出現(xiàn)在視窗绳泉;
??3.出現(xiàn)在視窗之后逊抡,占位圖片被瞬間替換成最終的圖片。

??如果你之前不了解懶加載秦忿,那么簡(jiǎn)單概括一下懶加載的優(yōu)勢(shì):可以減少頁(yè)面加載的時(shí)間麦射、頁(yè)面的大小和降低系統(tǒng)資源的占用蛾娶,這些對(duì)于性能都有顯著地提升。

??這里對(duì)于懶加載的方式就不在一一贅述峻呛,網(wǎng)上很多文檔都有詳細(xì)的教程穆碎,并且還有很多的第三方插件實(shí)現(xiàn)所禀,但是免不了都要折騰一番褂策。

??而這里我們要介紹的是在2019年4月6日扬蕊,Chrome官方公布蒂培,在Chrome75的新版本中給前端開(kāi)發(fā)者帶來(lái)的福利:Chrome原生支持圖片懶加載抗悍。




在這篇文章中指蚁,我們可以看到使用方式很簡(jiǎn)單,就是給<img>標(biāo)簽增加loading屬性即可:

<img src="logo.jpg" loading="lazy" alt="..." />
loading屬性支持三個(gè)值:
  • lazy:懶加載绢涡;
  • eager:不懶加載;
  • auto:相當(dāng)于不設(shè)置 loading 屬性辨液。

??Chrome認(rèn)為:“當(dāng)用戶(hù)滾動(dòng)到附近時(shí)”的具體要做的事情應(yīng)該留給瀏覽器虐急。

??用戶(hù)可能更希望瀏覽器在要加載的圖片或資源在即將進(jìn)入視口之前,再進(jìn)行提取滔迈。這樣更有助于節(jié)省資源和提升用戶(hù)打開(kāi)多圖頁(yè)面的效率止吁。

網(wǎng)友評(píng)論:





歡迎留言參加討論...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市燎悍,隨后出現(xiàn)的幾起案子敬惦,更是在濱河造成了極大的恐慌,老刑警劉巖谈山,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俄删,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡奏路,警方通過(guò)查閱死者的電腦和手機(jī)畴椰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鸽粉,“玉大人斜脂,你說(shuō)我怎么就攤上這事∏迸眩” “怎么了秽褒?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵壶硅,是天一觀的道長(zhǎng)威兜。 經(jīng)常有香客問(wèn)我销斟,道長(zhǎng),這世上最難降的妖魔是什么椒舵? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任蚂踊,我火速辦了婚禮,結(jié)果婚禮上笔宿,老公的妹妹穿的比我還像新娘犁钟。我一直安慰自己,他們只是感情好泼橘,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布涝动。 她就那樣靜靜地躺著,像睡著了一般炬灭。 火紅的嫁衣襯著肌膚如雪醋粟。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,821評(píng)論 1 290
  • 那天重归,我揣著相機(jī)與錄音米愿,去河邊找鬼。 笑死鼻吮,一個(gè)胖子當(dāng)著我的面吹牛育苟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播椎木,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼违柏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了香椎?” 一聲冷哼從身側(cè)響起勇垛,我...
    開(kāi)封第一講書(shū)人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎士鸥,沒(méi)想到半個(gè)月后闲孤,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡烤礁,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年讼积,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片脚仔。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡勤众,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鲤脏,到底是詐尸還是另有隱情们颜,我是刑警寧澤吕朵,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站窥突,受9級(jí)特大地震影響努溃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阻问,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一梧税、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧称近,春花似錦第队、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至衡未,卻和暖如春尸执,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背眠屎。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工剔交, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人改衩。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓岖常,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親葫督。 傳聞我的和親對(duì)象是個(gè)殘疾皇子竭鞍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 特別聲明:此篇文章內(nèi)容來(lái)源于@Jeremy Wagner的《Lazy Loading Images and Vid...
    Naeco閱讀 30,666評(píng)論 0 32
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)偎快、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,065評(píng)論 4 62
  • 剛迎來(lái)2017洽胶,微信晒夹、朋友圈被各種祝福、許愿轟炸姊氓,并不是說(shuō)這種行為不好丐怯,我感謝每一個(gè)群發(fā)祝福都帶上我的人,起碼我還...
    偏執(zhí)的刺猬小姐閱讀 125評(píng)論 0 0
  • 親子日記第20篇 2018年12月5日 星期三 陰 昨天晚上看著書(shū)陪兒子寫(xiě)晚間作業(yè)翔横,不知不覺(jué)竟睡著了读跷,模模糊糊聽(tīng)...
    惑與朦朧閱讀 152評(píng)論 0 0
  • 昨天晚上,住在立山室堂上頭(海拔近三千米)禾唁,從來(lái)沒(méi)有過(guò)的經(jīng)驗(yàn):一整大片白茫茫的雪效览,而我整個(gè)人置身其中无切。從下午到這山...
    3000煩惱風(fēng)閱讀 312評(píng)論 0 0