vanilla-lazyload实现懒加载
9个月前
超过295天
温馨提示
本文最后更新于2023年11月29日，已超过295天没有更新，若内容或图片失效，请留言反馈。
先引入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：点击进入
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
上一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
无名博客
9个月前 . LV.0
自带的loading="lazy"足够了
寻梦xunm
9个月前 . LV.0
@无名博客
这个有的浏览器不支持