钧言极客钧言极客

钧言极客

使用vanilla-lazyload实现懒加载

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

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

Github:vanilla-lazyload
UNPKG源:vanilla-lazyload
WIki文档: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;
}
    

demo演示:DEMO

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

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

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《使用vanilla-lazyload实现懒加载》
文章链接:https://www.jinjun.top/422.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 4

  1. 我该配置的都配置了 没见到懒加载的效果

    团团 2023年02月27日    回复
    • 不好意思,由于个人错误导致的问题,文章已经更正,并提供了一个demo的页面可以尝试一下

      钧言 2023年02月27日    回复
  2. 这样的好处是什么呀,我也想试试。

    老张博客 2022年05月18日    回复
    • 比之前的js配置更加简约,支持视频和背景这些懒加载,你可以看看我站都用上了这个库

      钧言 2022年05月18日    回复