Webpack项目图片懒加载Safari兼容与路径处理问题咨询

方案1：使用第三方库lazysizes（推荐，无需手动处理兼容与监听逻辑） #

lazysizes是轻量无依赖的懒加载库，自动兼容包括低版本Safari在内的绝大多数主流浏览器，且可以完美适配Webpack路径处理规则。

操作步骤 #

• 安装依赖

npm install lazysizes --save

• 配置Webpack的html-loader，识别图片的自定义懒加载路径属性：
  找到Webpack配置中处理HTML的html-loader配置项，添加data-src属性的路径解析规则，这样Webpack会自动处理HTML中data-src填写的相对路径，替换为打包后的正确资源地址：

module: {
  rules: [
    {
      test: /\.html$/i,
      loader: 'html-loader',
      options: {
        // 增加data-src属性的解析规则
        attributes: {
          list: [
            ...require('html-loader').defaultOptions.attributes.list,
            { tag: 'img', attribute: 'data-src', type: 'src' }
          ]
        }
      }
    }
  ]
}

• 修改HTML中图片的写法：
  将原本img标签的src属性改为data-src，并添加lazyload类名：

<img class="lazyload" data-src="./assets/images/demo.jpg" alt="示例图">

• 入口文件引入lazysizes：
  在src/index.ts中添加引入代码，无需额外写逻辑，库会自动处理懒加载监听与资源加载：

import 'lazysizes'

• 动态注入图片的路径处理：
  如果是通过JS动态创建的图片，直接导入对应图片资源即可拿到Webpack处理后的正确路径，赋值给data-src即可：

// 导入图片资源，Webpack会自动返回打包后的正确路径
import demoImg from '../public/assets/images/demo.jpg'

const img = document.createElement('img')
img.className = 'lazyload'
img.dataset.src = demoImg
document.body.appendChild(img)

方案2：手动实现Intersection Observer版本 #

如果不想引入第三方库，可以手动实现懒加载逻辑，路径处理规则和方案1一致：

• 按照方案1的步骤配置html-loader识别data-src属性
• HTML中图片写法和方案1一致，使用data-src存储真实资源地址
• 在src/index.ts中添加Intersection Observer监听逻辑：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target as HTMLImageElement
      img.src = img.dataset.src!
      observer.unobserve(img)
    }
  })
})

// 监听所有带lazyload类的图片
document.querySelectorAll('img.lazyload').forEach(img => {
  observer.observe(img)
})

• 动态注入图片的路径处理和方案1一致，导入图片后赋值给data-src，再将元素加入监听队列即可。

注意事项 #

如果需要兼容更低版本的浏览器，可以按需引入Intersection Observer的polyfill即可。

内容的提问来源于stack exchange，提问作者Akash