圖片懶加載的方式

前端開(kāi)發(fā)中:往往頁(yè)面有很多圖片,而首屏出現(xiàn)的圖片大概就少量幾張,全部加載圖片的話,不僅影響頁(yè)面渲染速度,還浪費(fèi)帶寬。首屏加載技術(shù)就是圖片懶加載,圖片到可視區(qū)域再加載。

將頁(yè)面里所有img屬性src屬性用data-xx代替,當(dāng)頁(yè)面滾動(dòng)直至此圖片出現(xiàn)在可視區(qū)域時(shí),用js取到該圖片的data-xx的值賦給src。

其中兩個(gè)插件可以幫我們實(shí)現(xiàn)圖片懶加載。

1、jqueryLazyload 依賴Jquery

2、echo.js方式


參考http://www.cnblogs.com/liliangel/p/6122836.html

http://www.cnblogs.com/flyromance/p/5042187.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前些日子從@張?chǎng)涡裎⒉┨幍靡环萃扑](Front-end-tutorial),號(hào)稱最全的資源教程-前端涉及的所有知識(shí)...
    谷子多閱讀 4,492評(píng)論 0 44
  • 大部分的后端會(huì)很很鄙視前端。我也不知道為什么,可能大部分人都會(huì)覺(jué)得腳本語(yǔ)言根本不算語(yǔ)言。 大多人 會(huì)叫我們切圖仔,...
    小黑的眼閱讀 3,610評(píng)論 0 15
  • 你知道么 你跟我約定來(lái)世的時(shí)候 我是很悲傷的 因?yàn)槟阄叶贾?沒(méi)有來(lái)世 這輩子無(wú)法在一起 就永遠(yuǎn)也沒(méi)有機(jī)會(huì)在一起了...
    shyaen閱讀 162評(píng)論 0 0
  • 突然對(duì)外貿(mào)有種厭倦的感覺(jué),假以時(shí)日想換一個(gè)行業(yè),換一種活法。什么時(shí)候工作成了全部,占據(jù)了整個(gè)生活,被它牽著走,這樣...
    鄧dsf閱讀 214評(píng)論 0 0

友情鏈接更多精彩內(nèi)容