生活随笔
收集整理的這篇文章主要介紹了
原生js实现懒加载
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
原生js實(shí)現(xiàn)懶加載
原理:
讓img的src為空，圖片的真實(shí)地址可以存儲(chǔ)在img一個(gè)自定義的屬性里，就比如date-src吧，等到目標(biāo)圖片出現(xiàn)在視野了，把data-src里的值賦給src
實(shí)現(xiàn)懶加載必備知識(shí)：
用getAttribute（屬性名）獲取自定義屬性
除此之外，我們還需要知道clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的區(qū)別以及所代表的含義
<!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
>
總結(jié)
以上是生活随笔為你收集整理的原生js实现懒加载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
