您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)js怎么實(shí)現(xiàn)圖片懶加載效果,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
JS是JavaScript的簡稱,它是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,主要用于web的開發(fā),可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果,讓網(wǎng)頁更加美觀。
圖片懶加載,思路:當(dāng)鼠標(biāo)滑動(dòng)到對(duì)應(yīng)圖片的高度時(shí),進(jìn)行圖片的加載;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 575px; height: auto; overflow: hidden; border: red 1px solid; margin: 0 auto; /*給該div設(shè)置定位*/ position: relative; } #div img{ width: 267px; height: 396px; margin-left: 10px; border: 1px solid #000; } </style> <script type="text/javascript"> function getPos(obj){ var l = 0; var t = 0; while(obj){ l += obj.offsetLeft; t += obj.offsetTop; obj = obj.offsetParent; } return {left:l ,top : t} } window.onload = window.onscroll = function(){ //獲取到img var aImg = document.getElementsByTagName("img"); //獲取到它的scrollTop 值 考慮兼容問題 var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop; // clientHeight = 上下padding + height var clientH = document.documentElement.clientHeight; //循環(huán)遍歷每一項(xiàng)通過調(diào)用獲取到每一個(gè)i 項(xiàng)對(duì)象的top 值 for (var i = 0;i<aImg.length;i++) { var aImgTop = getPos(aImg[i]).top; // 當(dāng)滾動(dòng)的時(shí)候進(jìn)行判斷,看他的滾動(dòng)的高度加上它的clientHeight 是否比它的 top 值大 // 如果大或等于說明滾動(dòng)到當(dāng)前位置可以加載圖片 if (oScrollTop + clientH >= aImgTop) { // 進(jìn)行圖片的加載 aImg[i].src = aImg[i].getAttribute("_src"); } } } </script> </head> <body> <div id="div"> <img _src="../img/1.jpg"/> <img _src="../img/2.jpg"/> <img _src="../img/3.jpg"/> <img _src="../img/4.jpg"/> <img _src="../img/6.jpg"/> <img _src="../img/7.jpg"/> <img _src="../img/1.jpg"/> <img _src="../img/2.jpg"/> <img _src="../img/3.jpg"/> <img _src="../img/4.jpg"/> <img _src="../img/6.jpg"/> <img _src="../img/7.jpg"/> <img _src="../img/3.jpg"/> <img _src="../img/4.jpg"/> <img _src="../img/6.jpg"/> <img _src="../img/7.jpg"/> </div> </body> </html>
當(dāng)有類似于瀑布流的布局時(shí)常用的加載模式
關(guān)于“js怎么實(shí)現(xiàn)圖片懶加載效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。