技术文献

参考公众号文章：https://mp.weixin.qq.com/s/_UjnNGup9DjWJM_mFc-nRw

document.addEventListener('DOMContentLoaded', () => {
 if (!('IntersectionObserver' in window)) {
   document.querySelectorAll('.lazy-img').forEach(img => {
     img.src = img.dataset.src;
   });
   return;
 }
 const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       const img = entry.target;
       img.src = img.dataset.src;
       img.onload = () => {
         img.classList.add('loaded');
       };
       observer.unobserve(img);
     }
   });
 }, {
   rootMargin: '100px'
 });
 document.querySelectorAll('.lazy-img').forEach(img => {
   observer.observe(img);
 });
});

添加模糊效果的CSS的代码

.lazy-img {
 filter: blur(10px);
 transition: filter 0.3s;
}
.lazy-img.loaded {
 filter: blur(0);
}

HTML代码

<img src="占位图.jpg" data-src="真实图片地址.jpg" class="lazy-img" />