html数据懒加载代码
时间: 2023-10-29 07:07:01 浏览: 36
下面是一个简单的示例代码,演示了如何使用HTML和JavaScript实现图片的懒加载:
```html
<!DOCTYPE html>
<html>
<head>
<title>Lazy Load Images</title>
<style>
img {
display: block;
margin: 10px auto;
width: 300px;
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Lazy Load Images Example</h1>
<div id="imageContainer">
<img data-src="image1.jpg" alt="Image 1">
<img data-src="image2.jpg" alt="Image 2">
<img data-src="image3.jpg" alt="Image 3">
<img data-src="image4.jpg" alt="Image 4">
<img data-src="image5.jpg" alt="Image 5">
</div>
<script>
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== 'none') {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
document.addEventListener('DOMContentLoaded', lazyLoad);
window.addEventListener('scroll', lazyLoad);
</script>
</body>
</html>
```
这段代码使用了`data-src`属性来保存图片的实际URL。在页面加载和滚动事件中,通过检查图片是否在可视区域内来判断是否加载图片。如果图片在可视区域内,就将`data-src`属性的值赋给`src`属性,并移除`data-src`属性,以加载图片。
请注意,这只是一个简单的示例代码,实际的懒加载实现可能需要更多的细节和优化,例如添加占位符、处理窗口大小改变等。