vanilla-lazyload实现懒加载

先引入JS库

<script async src="https://unpkg.com/browse/vanilla-lazyload@17.8.3/dist/lazyload.iife.min.js"></script>

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

<img src="./images/loading.gif" data-lzay-src="./images/web.png" alt="web" class="lazy"> 

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

var lazyLoadInstance = new LazyLoad({
// css属性选择器
  elements_selector: 'img',
// 滚动多少加载
  threshold: 0,
// 加载的元素URL的属性
  data_src: 'lazy-src'
})

css模糊渐变特效

img[data-lazy-src]:not(.loaded) {filter: blur(10px) brightness(1);}img[data-lazy-src].error {filter: none;}

img{
-webkit-transition: filter 375ms ease-in .2s,-webkit-transform .6s;
    -moz-transition: filter 375ms ease-in .2s,-moz-transform .6s;
    -o-transition: filter 375ms ease-in .2s,-o-transform .6s;
    -ms-transition: filter 375ms ease-in .2s,-ms-transform .6s;
    transition: filter 375ms ease-in .2s,transform .6s;
}

Github：点击进入