Lazyload加载图片几种方法
文章描述：
图片懒加载是使网页图片从上往下加载效果
jquery.lazyload.js
1、将图片路径写入data-original属性
2、给lazyload的图片增加一个名为lazy的class
3、选择所有要lazyload的图片（img.lazy），执行lazyload();
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script><img class="lazy" data-original="images/l-1.jpg" />
<img class="lazy" data-original="images/l-2.jpg" />
<img class="lazy" data-original="images/l-3.jpg" />
<img class="lazy" data-original="images/l-4.jpg" />
<img class="lazy" data-original="images/l-5.jpg" />$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});比较常用的方法
提前加载——Threshold
事件触发(可以是jquery事件，也可以是自定义事件)——Event
设定效果——Effects
滚动容器内的图片——container
EasyLazyload.js
比较全能的延迟加载，不会对样式有影响，最主要可以不用特意去设定图片的width和height（毕竟图片不一致的宽高大有人需要，难不成还真的一个一个去设定？）而且scroll到照片时，有缓冲视觉效果
<img data-lazy-src="images/l-1.jpg" />
<img data-lazy-src="images/l-2.jpg" />
<img data-lazy-src="images/l-3.jpg" />
<img data-lazy-src="images/l-4.jpg" />
<img data-lazy-src="images/l-5.jpg" /><script src="js/jquery.min.js"></script>
<script src="js/EasyLazyload.min.js"></script> lazyLoadInit({
coverColor:"white",
coverDiv:"<h1>test</h1>",
offsetBottom:0,
offsetTopm:0,
showTime:1100,
onLoadBackEnd:function(i,e){
console.log("onLoadBackEnd:"+i);
}
,onLoadBackStart:function(i,e){
console.log("onLoadBackStart:"+i);
}
});
自定义开发不依赖jquery
https://segmentfault.com/a/1190000008518315
发布时间：2022/08/23
发表评论