图片懒加载
Sonder
2020-05-14
5516字
14分钟
浏览 (2.6k)
推荐使用
data-src
的时候图片不要加src
属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
img[data-src] {
display: block;
}
</style>
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i39.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i40.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i41.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i42.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i43.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i44.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i45.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i46.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i47.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i48.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i49.jpg" alt="">
<img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i50.jpg" alt="">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i1.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i2.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i3.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i4.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i5.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i6.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i7.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i8.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i9.jpg">
<img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i10.jpg">
</body>
<script type="text/javascript">
window.onscroll = function () {
Limg()
}
window.onload = function () {
var img = document.querySelectorAll("img[data-src]")
for (var i = 0; i < img.length; i++) {
img[i].style.opacity = "0"
}
Limg();
}
function Limg() {
var viewHeight = document.documentElement.clientHeight
var t = document.documentElement.scrollTop || document.body.scrollTop;
var limg = document.querySelectorAll("img[data-src]")
Array.prototype.forEach.call(limg, function (item, index) {
var rect;
if (item.getAttribute("data-src") === ""){
return
}
//getBoundingClientRect
rect = item.getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < viewHeight) {
(function () {
var img = new Image()
img.src = item.getAttribute("data-src")
item.src = img.src
var j = 0
setInterval(function () {
j += 0.2
if (j <= 1) {
item.style.opacity = j
return
}
}, 100)
item.removeAttribute('data-src')
})()
}
})
}
</script>
</html>
如果面试官问你如何实现图片懒加载
window.addEventListener("scroll", lazyload);
function lazyload() {
let viewHeight = document.body.clientHeight; //获取可视区高度
let imgs = document.querySelectorAll("img[data-src]");
imgs.forEach((item, index) => {
if (item.dataset.src === "") return;
// 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
let rect = item.getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < viewHeight) {
item.src = item.dataset.src;
item.removeAttribute("data-src");
}
});
}