intersection observer实现图片懒加载

图片懒加载（Lazy Load）是一种优化网页性能的技术，它可以延迟图片的加载时间，只有当用户滚动到该图片的位置时才会进行加载。这样可以减少页面的初始加载时间，提高页面的响应速度和用户体验。

以下是使用浏览器原生支持的 IntersectionObserver 接口，监测元素与视口交叉，当图片进入视口时触发图片的加载。

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index2.css">
</head>
<body><div><h1>图片相册</h1><img data-src="http://pic1.win4000.com/wallpaper/2018-09-19/5ba21a3006800.jpg" alt=""><img data-src="https://t7.baidu.com/it/u=1785207335,3397162108&fm=193&f=GIF" alt=""><img data-src="https://t7.baidu.com/it/u=338595665,4065109605&fm=193&f=GIF" alt=""><img data-src="https://t7.baidu.com/it/u=1732966997,2981886582&fm=193&f=GIF" alt=""><img data-src="https://t7.baidu.com/it/u=2581522032,2615939966&fm=193&f=GIF" alt=""><img data-src="https://t7.baidu.com/it/u=245883932,1750720125&fm=193&f=GIF" alt=""><img data-src="https://t7.baidu.com/it/u=3423293041,3900166648&fm=193&f=GIF" alt=""><img data-src="https://t7.baidu.com/it/u=3241434606,2550606435&fm=193&f=GIF" alt=""> <img data-src="https://t7.baidu.com/it/u=1417505637,1247476664&fm=193&f=GIF" alt=""><img data-src="https://img0.baidu.com/it/u=775184654,1087701200&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"><img data-src="https://lmg.jj20.com/up/allimg/1114/1110200ZS0/2011100ZS0-9-1200.jpg" alt=""></div></body>
<script src="./index2.js"></script>
</html>

css代码：

img{width: 100vw;transform: translateX(50%);opacity: 0;transition: all 500ms;
}.fade{transform: translateX(0);opacity: 1;transition: all 500ms;
}

js代码：

const targets = document.querySelectorAll('img');
const lazyload = target =>{const io = new IntersectionObserver((entries,observer) =>{entries.forEach((entry)=>{console.log("load img")if(entry.isIntersecting){const img = entry.targetconst src = img.getAttribute("data-src")img.setAttribute("src",src);img.classList.add("fade")observer.disconnect();}})})io.observe(target)
}targets.forEach(lazyload);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/600662.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！