有时候列表存在许多图片，那么一次性加载会阻塞 http 请求，为了避免在可视窗口之外的元素进行不必要的图片加载，可以尝试使用懒加载进行优化。懒加载可以显著提高页面加载性能，特别是当页面包含大量图片时。为了实现延迟加载图片（也称为懒加载），可以使用 JavaScript 和 Intersection Observer API。
data-src 属性存储实际的图片 URL。DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Load Imagestitle>
<style>
.placeholder {
width: 100%;
height: 200px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
}
style>
head>
<body>
<h1>Lazy Load Images Exampleh1>
<div class="image-container">
<img class="lazy" data-src="image1.jpg" alt="Image 1" class="placeholder">
<img class="lazy" data-src="image2.jpg" alt="Image 2" class="placeholder">
<img class="lazy" data-src="image3.jpg" alt="Image 3" class="placeholder">
div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll('img.lazy');
if ('IntersectionObserver' in window) {
const lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers that do not support IntersectionObserver
let lazyLoadThrottleTimeout;
function lazyLoad() {
if (lazyLoadThrottleTimeout) {
clearTimeout(lazyLoadThrottleTimeout);
}
lazyLoadThrottleTimeout = setTimeout(function() {
const scrollTop = window.pageYOffset;
lazyImages.forEach(function(img) {
if (img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if (lazyImages.length == 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationChange", lazyLoad);
}
}, 20);
}
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationChange", lazyLoad);
}
});
script>
body>
html>
data-src 属性存储实际的图片 URL。class="lazy" 标记需要懒加载的图片。IntersectionObserver 监控图片元素，当图片元素进入视口时，加载实际的图片。IntersectionObserver，使用滚动事件和节流函数实现懒加载。import React, { useEffect, useRef } from 'react';
import './App.css';
const LazyImage = ({ src, alt }) => {
const imgRef = useRef();
useEffect(() => {
const imgElement = imgRef.current;
const handleIntersection = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
observer.unobserve(lazyImage);
}
});
};
const observer = new IntersectionObserver(handleIntersection, {
root: null, // 使用视口作为根
rootMargin: '0px',
threshold: 0.1 // 当至少 10% 的图片进入视口时触发
});
if (imgElement) {
observer.observe(imgElement);
}
return () => {
if (imgElement) {
observer.unobserve(imgElement);
}
};
}, []);
return <img ref={imgRef} data-src={src} alt={alt} className="lazy placeholder" />;
};
const App = () => {
return (
<div className="App">
<h1>Lazy Load Images Example</h1>
<div className="image-container">
<LazyImage src="https://via.placeholder.com/300" alt="Image 1" />
<LazyImage src="https://via.placeholder.com/300" alt="Image 2" />
<LazyImage src="https://via.placeholder.com/300" alt="Image 3" />
{/* 添加更多图片 */}
</div>
</div>
);
};
export default App;
.placeholder {
width: 100%;
height: 200px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
}
IntersectionObserver 是现代浏览器支持的 API，如果需要兼容旧版浏览器，可以使用滚动事件和节流函数作为回退方案。这样，当用户滚动页面时，只有进入视口的图片才会被加载，从而提高页面的加载性能。
但这样不可避免的会存在一定视觉效果上的体验缺失，在页面滚动特别快速时，由于浏览器来不及绘制刚刚进入视图的元素，便会导致出现短暂的白屏现象。这便需要在开发过程中，去做出一定地取舍。