原生JS实现图片懒加载功能

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

main{

width: 800px;

margin: 0 auto;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-evenly;

}

main img{

width: 300px;

height: 300px;

margin: 10px 0;

}

</style>

</head>

<body>

<main>

</main>

function lazyImg(defaults='../../imgs/0.jpg'){

//获取需要设置懒加载的图片元素

let lazyImgs=Array.from(document.querySelectorAll('img[data-src]')) ;

//设置默认图片

setDefaultImg();

//监听滚动事件

window.addEventListener('scroll',function(){

loadImgs();

})

//设置默认图片函数

function setDefaultImg(){

为每个Img标签设置默认图片

for(let i of lazyImgs){

i.src=defaults;

}

//调用加载函数将已出现在用户可视区域的图片进行加载

loadImgs();

}

//懒加载必要图片

function loadImgs(){

console.log(lazyImgs)

for(var i=0;i< lazyImgs.length;i++){

//检测当前位置

var img=lazyImgs[i];

if(loadImg(img)){

　　　　　 //如果图片加载成功，将数据从懒加载数组中清除，避免不必要的循环操作

lazyImgs.splice(i,1);

　　　　　 //数据移除后当前索引要减一

i--;

}

console.log(lazyImgs)

}

//分析指定元素是否到达可视区域

function loadImg(img){

　　　　//getBoundingClientRect();获取当前图片距离可视区的位置不了解可查阅此函数文档

let position= img.getBoundingClientRect();

if(position.right>0&&position.left<document.documentElement.clientWidth&&

position.bottom>0&&position.top<document.documentElement.clientHeight){

img.src=img.dataset.src;

return true;

}

return false;

}

　　//调用懒加载函数实现功能

lazyImg();

</script>

</body>

</html>

posted @ 2020-09-15 17:59 门市阅读(150) 评论(0) 收藏举报

刷新页面返回顶部

门市

原生JS实现图片懒加载功能

公告