webpack项目安装vanilla-lazyload实现懒加载

npm安装 vanilla-lazyload

介绍

vanilla-lazyload是一个轻量级、灵活的脚本，可将图像、背景、视频、iframe等实现懒加载

使用

1. npm安装

npm install vanilla-lazyload --save-dev

2. 入口文件导入

import LazyLoad from 'vanilla-lazyload';

3. 使用lazyload

  const lazyLoadInstance = new LazyLoad({
    element_selector: '.lazy',
  });

4. 在需要懒加载的img标签中, 添加属性data-src和class名

<!-- src属性可填写加载中的 占位图/加载 gif路径 -->
<img src="./images/common/loading.gif" 
     data-src="./images/products/pro1.png" 
     alt="pro1" 
     class="lazy"
> 

问题

• 使用webpack打包时，默认只解析img标签的src属性， data-src所写路径的图片在webpack打包后会改变，导致懒加载失效。

解决

• 修改webpack.config.js文件中html-loader的配置：

      // 添加解析src和data-src属性即可
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          attributes: {
            list: [
              {
                tag: 'img',
                attribute: 'src',
                type: 'src',
              },
              {
                tag: 'img',
                attribute: 'data-src',
                type: 'src',
              },
            ],
          },
        },
      },