实现图片懒加载时，可以使用 JavaScript 监听滚动事件，并根据图片是否进入可视区域来延迟加载图片。
方案一
<!DOCTYPE html>
<html><head><style>.placeholder {width: 300px;height: 200px;background-color: #ccc;}.image {width: 300px;height: 200px;object-fit: cover;}</style></head><body><h1>Lazy Loading Images Demo</h1><div class="placeholder"></div><!-- 这儿可以讨论 v-for 渲染 --><img class="image" data-src="path/to/image.jpg" alt="Lazy Loaded Image" onerror="handleImageError(this)"><script>// 获取所有具有 data-src 属性的图片元素const images = document.querySelectorAll('img[data-src]');// 监听滚动事件window.addEventListener('scroll', lazyLoad);// 初始化时触发一次懒加载lazyLoad();function lazyLoad() {// 获取视窗的顶部和底部位置const windowHeight = window.innerHeight;const windowTop = window.pageYOffset || document.documentElement.scrollTop;const windowBottom = windowTop + windowHeight;// 遍历每个具有 data-src 属性的图片元素images.forEach((img) => {// 判断图片是否进入视窗const imgTop = img.offsetTop;const imgBottom = imgTop + img.offsetHeight;if (imgTop < windowBottom && imgBottom > windowTop) {// 加载图片img.src = img.dataset.src;// 移除 data-src 属性，避免重复加载img.removeAttribute('data-src');}});// 如果所有图片都已加载完毕，移除滚动事件的监听if (images.length === 0) {window.removeEventListener('scroll', lazyLoad);}}function handleImageError(img) { // 图片加载失败时显示替代文本 img.alt = 'Image Failed to Load'; // 隐藏无法加载的图片 img.style.display = 'none'; }// 在页面加载完成后，直接加载可见范围内的图片(避免初始的空白占位)document.addEventListener('DOMContentLoaded', lazyLoad);</script></body>
</html>
在上面的示例中，图片标签添加了 data-src 属性来保存图片的真实地址。通过 JavaScript，监听滚动事件并判断图片是否进入视窗，当图片进入视窗时，将 data-src 的值赋给 src 属性，实现延迟加载图片。当图片加载失败时会触发 handleImageError 函数。该函数将替代文本设置为 “Image Failed to Load”，并将无法加载的图片隐藏起来。这样用户就能知道该图像无法加载，并且页面的布局不会被破坏。
)
