关于懒加载使用方法
在网上看了众多案例,关于我实现懒加载的方法,在此分享一下
1.先进入https://www.lazyloadjs.cn/下载最新版lazyload.js并导入引用
2.查看官方的使用方法(由于我之前看的案例js版本比较低,导致我引用之后不好使所以一定要看文档)
3.接下来看我的代码(希望会给你们点灵感)
//html
<div class="ib-head">
<img class="headPhoto" data-src="这里放图片地址">
</div>
//js
<script src="./lazyload.js"></script>//这里引入js路径就填自己的路径
<script>
$().ready(function(){
//可任意选择你想延迟加载的目标元素,例如直接使用样式名headPhoto作为选择条件
$(".headPhoto").lazyload()
})
</script>
这已经是懒加载了,可以自己测试
点击下方蓝字可以看别的大佬的讲解文章;)
可以看这里这里有别的大佬的讲解文章
感受
其实也没啥感受,就是用懒加载可以大幅度降低卡顿,因为之前做的项目,客户觉得太卡,我是直接全部加载出来,还没用ajax,所以只能用懒加载了,很简单的道理,一次全部加载出来,还是看到哪加载到那里,哪个更顺畅,大家心里肯定都有数