图片懒加载插件封装，让你的网站飞起来

图片懒加载，也被称为延迟加载，是一种技术，用于推迟图像的加载，直到它们在视口中可见。这可以大大提高页面加载速度，尤其是在具有大量图像的页面上。

图片懒加载的意义

在项目中，如果一开始加载页面，就把所有的真实图片也去加载，不论是从网络消耗上，还是从页面渲染上都是非常的消耗性能的。

图片懒加载技术，可以将页面内的所有图片都设置为延迟加载，当滚动条滑过图片所在区域的时候，再去加载这些图片，以此减少页面加载的资源消耗。

图片懒加载插件封装

为了方便使用图片懒加载技术，我们可以封装一个图片懒加载的插件。

1. 创建一个新的项目

mkdir lazyload-plugin
cd lazyload-plugin
npm init -y

2. 安装必要的依赖

npm install --save-dev webpack webpack-cli webpack-dev-server

3. 创建一个webpack配置文件

touch webpack.config.js

4. 在webpack配置文件中添加以下内容

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lazyload.js',
    library: 'lazyload',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  devServer: {
    contentBase: './dist',
  },
};

5. 创建一个src文件夹，并在其中创建一个index.js文件

mkdir src
touch src/index.js

6. 在index.js中添加以下内容

export default function lazyload(selector) {
  const images = document.querySelectorAll(selector);

  images.forEach((image) => {
    const src = image.getAttribute('data-src');

    image.addEventListener('load', () => {
      image.classList.add('lazyload--loaded');
    });

    image.setAttribute('src', src);
  });
}

7. 运行webpack

npm run dev

8. 在你的HTML文件中使用这个插件

<script src="dist/lazyload.js"></script>

<img data-src="image.jpg" alt="Image">

<script>
  lazyload('img');
</script>

现在，当页面滚动到图片所在区域时，图片就会被加载。

总结

图片懒加载是一种非常有效的前端优化技术，它可以大大提高页面的加载速度，从而优化用户体验。

我们可以通过封装一个图片懒加载的插件，来方便地使用这种技术。

使用图片懒加载插件可以显著提升网站性能，优化用户体验，让你的网站在竞争中脱颖而出。