生活随笔
收集整理的這篇文章主要介紹了
原生js实现懒加载
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原生js實現懶加載
原理:
讓img的src為空，圖片的真實地址可以存儲在img一個自定義的屬性里，就比如date-src吧，等到目標圖片出現在視野了，把data-src里的值賦給src
實現懶加載必備知識：
用getAttribute（屬性名）獲取自定義屬性
除此之外，我們還需要知道clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的區別以及所代表的含義
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><meta http
-equiv
="X-UA-Compatible" content
="ie=edge"><title
>圖片懶加載
</title
><style
>*{margin
: 0;padding
: 0;}img
{display
: block
;width
: 400px
;height
: 300px
;}</style
>
</head
>
<body
><img src
="" date
-src
="../images/1.jpg" date
-h
="300" alt
=""><img src
="" date
-src
="../images/2.jpg" date
-h
="300" alt
=""><img src
="" date
-src
="../images/3.jpg" date
-h
="300" alt
=""><img src
="" date
-src
="../images/4.jpg" date
-h
="300" alt
=""><img src
="" date
-src
="../images/5.jpg" date
-h
="300" alt
=""><img src
="" date
-src
="../images/bird.png" alt
=""><script
>var imgs
=document
.getElementsByTagName("img");var n
=0;var seeHeight
= document
.documentElement
.clientHeight
;var h
= imgs
[0].getAttribute('date-h');var index
= Math
.floor(seeHeight
/h
);for(i
=0;i
<=index
;i
++){imgs
[i
].src
= imgs
[i
].getAttribute('date-src');}window
.onscroll = function(){for (var i
= n
; i
< imgs
.length
; i
++) {var scrollTop
= document
.body
.scrollTop
|| document
.documentElement
.scrollTop
;if (imgs
[i
].offsetTop
< seeHeight
+ scrollTop
) {if (imgs
[i
].getAttribute('src') == '') {imgs
[i
].src
= imgs
[i
].getAttribute('date-src');}n
= i
+ 1;console
.log('n = ' + n
);}}}</script
>
</body
>
</html
>
總結
以上是生活随笔為你收集整理的原生js实现懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
