给主题配置一个全新的lazyload库，来自verlok的vanilla-lazyload开源js库，支持更多的特性和特效。

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

Github：vanilla-lazyload UNPKG源：vanilla-lazyload WIki文档：vanilla-lazyload

废话不多说直接开搞

  • 先引入JS库
1<script async src="https://unpkg.com/browse/vanilla-lazyload@17.8.3/dist/lazyload.iife.min.js"></script>
  • 格式化图片样式

src属性可填写加载中的占位图/加载gif路径，data-lazy-src属性设置为原图路径

1<img src="./images/loading.gif" data-lzay-src="./images/web.png" alt="web" class="lazy">
  • 配置运行参数

以下是我的Javascript参数，更多参数DIY自行找文档

1var lazyLoadInstance = new LazyLoad({
2// css属性选择器
3  elements_selector: 'img',
4// 滚动多少加载
5  threshold: 0,
6// 加载的元素URL的属性
7  data_src: 'lazy-src'
8})
  • css模糊渐变特效
 1img[data-lazy-src]:not(.loaded) {filter: blur(10px) brightness(1);}img[data-lazy-src].error {filter: none;}
 2
 3img{
 4-webkit-transition: filter 375ms ease-in .2s,-webkit-transform .6s;
 5    -moz-transition: filter 375ms ease-in .2s,-moz-transform .6s;
 6    -o-transition: filter 375ms ease-in .2s,-o-transform .6s;
 7    -ms-transition: filter 375ms ease-in .2s,-ms-transform .6s;
 8    transition: filter 375ms ease-in .2s,transform .6s;
 9}
10

demo演示：DEMO

更多的参数可以去看作者的wiki文档，配置起来比jquery.lazyload.js简单，性能也比前者要好不少。

感谢团团反馈，检查是我写文章的时候把作者的js搞混了，现已经修正。