首屏优化-图片懒加载的代码实践(可直接运行)

程序员大侠

于 2024-05-06 14:18:20 发布

阅读量403

点赞数 8

分类专栏：前端文章标签：图片懒加载首屏优化

本文链接：https://blog.csdn.net/lalala8866/article/details/138493650

版权

前端专栏收录该内容

58 篇文章 0 订阅

订阅专栏

本文介绍了一个使用JavaScript实现图片懒加载的示例，通过监听滚动事件和判断图片是否进入视窗来延迟加载图片，同时处理加载失败的情况，保持页面布局整洁。

摘要由CSDN通过智能技术生成

实现图片懒加载时，可以使用 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”，并将无法加载的图片隐藏起来。这样用户就能知道该图像无法加载，并且页面的布局不会被破坏。