我們在瀏覽淘寶京東等大型購物網頁時會經常出現許多圖片而圖片需要花費我們非常多的流量問題。
我們在寫網頁的時候怎麼解決這個問題呢？這時候就要用到我們圖片懶載入的問題，這樣不僅可以
解決流量問題，也提高了效能等等。
下面我們就來看圖片的懶載入怎麼問題。
<span style="font-size: 18px"><!DOCTYPE html></span><br/><span style="font-size: 18px"><html lang="en"></span><br/><span style="font-size: 18px"><head></span><br/><span style="font-size: 18px"> <meta charset="UTF-8"></span><br/><span style="font-size: 18px"> <title>Title</title></span><br/><span style="font-size: 18px"> <style></span><br/><span style="font-size: 18px"> *{</span><br/><span style="font-size: 18px"> margin: 0;</span><br/><span style="font-size: 18px"> <a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a>: 0;</span><br/><span style="font-size: 18px"> <a href="http://www.php.cn/wiki/956.html" target="_blank">list-style-type</a>: none;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> html,body{</span><br/><span style="font-size: 18px"> width: 100%;</span><br/><span style="font-size: 18px"> height: 100%;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> #p p{</span><br/><span style="font-size: 18px"> width: 400px;</span><br/><span style="font-size: 18px"> height: 500px;</span><br/><span style="font-size: 18px"> /*border:1px solid #000;*/</span><br/><span style="font-size: 18px"> <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block;</span><br/><span style="font-size: 18px"> margin:10px;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> img{</span><br/><span style="font-size: 18px"> width: 100%;</span><br/><span style="font-size: 18px"> height: 100%;</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> </style></span><br/><span style="font-size: 18px"> <script></span><br/><span style="font-size: 18px"> // 获取距离父级距离</span><br/><span style="font-size: 18px"> function getPos(obj) {</span><br/><span style="font-size: 18px"> var t=0;//先声明两个变量 用来存储距离上面的高度 距离左边的高度</span><br/><span style="font-size: 18px"> var l=0;</span><br/><span style="font-size: 18px"> while (obj){//循环判断这个元素是否存在，存在才执行这个方法</span><br/><span style="font-size: 18px"> t+=obj.offsetTop; // 加上距离父级的距离</span><br/><span style="font-size: 18px"> l+=obj.offsetLeft;</span><br/><span style="font-size: 18px"> obj=obj.offsetParent;// 有父级让他变成他的父级</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> return {left:l,top:t}; //把值传出去</span><br/><span style="font-size: 18px"> }</span><br/><br/><span style="font-size: 18px"> window.onload=window.onscroll=function () {//滚动的时候和页面加载时执行的一样</span><br/><span style="font-size: 18px"> var aImg=<a href="http://www.php.cn/code/658.html" target="_blank">document</a>.<a href="http://www.php.cn/code/8145.html" target="_blank">getElementsByTagName</a>('img');//获取所有的元素img元素</span><br/><span style="font-size: 18px"> var oSCrollT=document.body.scrollTop || document.documentElement.scrollTop;// 滚动条滚动高度</span><br/><span style="font-size: 18px"> var oClh=document.documentElement.clientHeight;//可视区的高度</span><br/><span style="font-size: 18px"> var oScr=oSCrollT + oClh; // 滚动条高度 + 可视区的高度</span><br/><span style="font-size: 18px"> for(var i=0;i<aImg.length;i++){ //循环所有的img，把它距离页面顶部的距离 和 滚动高度+可视区的高度进行比较</span><br/><span style="font-size: 18px"> if(oScr > getPos(aImg[i]).top){</span><br/><span style="font-size: 18px"> aImg[i].src=aImg[i].getAttribute('_src'); //给src属性赋值</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> }</span><br/><span style="font-size: 18px"> </script></span><br/><span style="font-size: 18px"></head></span><br/><span style="font-size: 18px"><body></span><br/><span style="font-size: 18px"> <p id="p"></span><br/><span style="font-size: 18px"> <p><img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/2.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/3.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/4.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/5.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/6.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/7.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/8.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/9.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/10.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/11.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/12.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/13.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/14.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> <p><img src="/static/imghwm/default1.png" data-src="img/15.jpg" class="lazy" _ alt="關於圖片的懶加載的實例講解" ></p></span><br/><span style="max-width:90%"> </p></span><br/><span style="font-size: 18px"></body></span><br/><span style="font-size: 18px"></html><br/>今天的内容就到这里，你学会了吗？</span>以上是關於圖片的懶加載的實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
刪除Internet Explorer的商業案例Apr 15, 2025 am 10:30 AMInternet Explorer（IE）11與其他所有主要瀏覽器之間的距離是越來越多的鴻溝。增加對技術過時的支持
焦點戒指的動畫位置Apr 15, 2025 am 10:27 AM莫里斯·馬漢（Maurice Mahan）創建了FocusOverlay，這是一個“用於創建重點元素疊加的庫”。該描述對您有些混亂，不需要一個庫
使用圖像管理服務的工作流注意事項Apr 15, 2025 am 10:20 AM所有這些網站都想幫助您使用圖像。他們做一些事情，例如優化您的圖像並幫助您執行表演。那是一件非常好的事情。通過任何指標，圖像是資源的主要部分
挖掘WordPress中的預覽加載動畫Apr 15, 2025 am 10:19 AMWordPress在5.0版中運回了Block Editor（又名Gutenberg），然後帶來了一個時髦的新帖子預覽屏幕，顯示WordPress徽標繪圖
WordPress插件過載？嘗試一下JetPack！Apr 15, 2025 am 10:18 AMWordPress生態系統具有大量的插件，可提供從放大器到Zapier集成的所有內容，因此，介於兩者之間。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 Linux新版
SublimeText3 Linux最新版
Dreamweaver CS6
視覺化網頁開發工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
