lazyload-img: 图片懒加载

一个自己实现的图片懒加载的功能

项目主页: https://github.com/afeiship/lazyload-img

安装

yarn add @jswork/lazyload-img

方式1: UMD 方式引用

<script src="https://unpkg.com/@jswork/lazyload-img@1.0.5/dist/index.umd.js"></script>

方式2: 正常的 import

初始化 js，这个一般放在页面的最下面 body 之前

import LazyloadImg from '@jswork/lazyload-img';

LazyloadImg.init({
  selector: '.lazyload',
  interval: 300,
});

图片的变化

img[data-src].lazy {
  background-color: #f5f5f5;
  opacity: 0.2;
  transition: opacity 0.6s;
}

HTML

• 基本的 lazy 样式
• 占位图：src 这里
• data-src 存放真实的图片路径
• title/alt 有利于 SEO

<img
      class="lazy aspect-[1] w-16 rounded object-cover"
      src="https://tva1.js.work/large/da432263gy1hnkj07dzyzj207i05mglf.jpg"
      data-src="<%= item.cover %>"
      title="<%= item.name %>"
      alt="<%= item.name %>主图" />