JavaScript實(shí)現(xiàn)懶加載-創(chuàng)新互聯(lián)

文章目錄
  • 前言
  • 一、懶加載是什么？
  • 二、懶加載的特點(diǎn)。
  • 三、懶加載的實(shí)現(xiàn)原理。
  • 四、實(shí)現(xiàn)懶加載。
  • 五、懶加載結(jié)果展示。
  • 總結(jié)

成都創(chuàng)新互聯(lián)公司專業(yè)提供達(dá)州托管服務(wù)器服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購(gòu)買達(dá)州托管服務(wù)器服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。
前言

身為開(kāi)發(fā)人員的我們進(jìn)行項(xiàng)目開(kāi)發(fā)時(shí)，不僅僅要對(duì)頁(yè)面進(jìn)行設(shè)計(jì)，而且還要考慮項(xiàng)目上線后是否能進(jìn)行性能優(yōu)化，從而達(dá)到減輕對(duì)服務(wù)器的負(fù)載，讓用戶擁有一個(gè)友好的項(xiàng)目體驗(yàn)感。常見(jiàn)的項(xiàng)目性能優(yōu)化方式有很多。例如：減少HTTP請(qǐng)求，減少DNS查詢，避免重定向，圖片懶加載等。接下來(lái)，為大家介紹項(xiàng)目性能優(yōu)化之一 —圖片懶加載。

一、懶加載是什么？

懶加載也叫延遲加載，按需加載。指的是在長(zhǎng)網(wǎng)頁(yè)中延遲加載圖片數(shù)據(jù)，是一種較好的網(wǎng)頁(yè)性能優(yōu)化的方式。在比較長(zhǎng)的網(wǎng)頁(yè)或應(yīng)用中，如果圖片很多，所有的圖片都被加載出來(lái)，而用戶只能看到可視窗口的那一部分圖片數(shù)據(jù)，這樣就浪費(fèi)了性能。
如果使用圖片的懶加載就可以解決以上問(wèn)題。在滾動(dòng)屏幕之前，可視化區(qū)域之外的圖片不會(huì)進(jìn)行加載，在滾動(dòng)屏幕時(shí)才加載。這樣使得網(wǎng)頁(yè)的加載速度更快，減少了服務(wù)器的負(fù)載。懶加載適用于圖片較多，頁(yè)面列表較長(zhǎng)（長(zhǎng)列表）的場(chǎng)景中。
原文鏈接：點(diǎn)擊跳轉(zhuǎn)

二、懶加載的特點(diǎn)。
  • 減少無(wú)用資源的加載：使用懶加載明顯減少了服務(wù)器的壓力和流量，同時(shí)也減小了瀏覽器的負(fù)擔(dān)和服務(wù)器的負(fù)載。
  • 提升用戶體驗(yàn):如果同時(shí)加載較多圖片，可能需要等待的時(shí)間較長(zhǎng)，這樣影響了用戶體驗(yàn)，而使用懶加載就能大大的提高用戶體驗(yàn)。
  • 防止加載過(guò)多圖片而影響其他資源文件的加載 ：會(huì)影響網(wǎng)站應(yīng)用的正常使用。
三、懶加載的實(shí)現(xiàn)原理。
  • 首先準(zhǔn)備需要的img標(biāo)簽。和圖片(注意：此處包含了未加載時(shí)需要展示的圖片)
  • 將img標(biāo)簽的src屬性都設(shè)置為未加載時(shí)展示圖片的路徑，并設(shè)置對(duì)應(yīng)的data-xxx(此處我使用data-src)為真正需要展示圖片的路徑。
  • 判斷當(dāng)前圖片是否已經(jīng)進(jìn)入用戶瀏覽器的可視區(qū)域，若未進(jìn)入，則繼續(xù)展示未加載時(shí)展示的圖片；如已進(jìn)入，則將data-src中真正的圖片路徑動(dòng)態(tài)賦值給src屬性，從而將圖片進(jìn)行加載，最后達(dá)到懶加載的功能。
四、實(shí)現(xiàn)懶加載。

使用原生JavaScript實(shí)現(xiàn)

blankblankblankblankblankblankblankblank
五、懶加載結(jié)果展示。

可以觀察到只有當(dāng)用戶將圖片滑動(dòng)至瀏覽器可視區(qū)域，真正的圖片地址才會(huì)被請(qǐng)求，從而達(dá)到懶加載的效果(注意： 視頻有背景音樂(lè)，請(qǐng)謹(jǐn)慎播放)。

總結(jié)

這是我在做項(xiàng)目時(shí)使用到的性能優(yōu)化操作 —圖片懶加載，鑒于自身實(shí)力的有限，可能在文章講解中出現(xiàn)錯(cuò)誤，大家可以私信或評(píng)論指出錯(cuò)誤。創(chuàng)作不易，點(diǎn)個(gè)贊唄。同時(shí)有任何疑問(wèn)我們一起交流，一起成長(zhǎng)。如果有更好的文章，也歡迎貼在下面哦，我們相互學(xué)習(xí)。

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

網(wǎng)站名稱：JavaScript實(shí)現(xiàn)懶加載-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://bm7419.com/article16/gejgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、搜索引擎優(yōu)化、網(wǎng)站排名、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站