关于Lazyload加载图片几种方法的介绍

jQuery代码
来源：站三界导航
87阅读
2022-10-24

Lazyload长页面图片的延迟加载：

一，jquery.lazyload.js

注意事项：jquery.js务必先引进，然后才加载lazyload；img长宽一定要有，每幅长宽可以不一致；在js段，可以不用$(window).ready来加载事件；

1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片（img.lazy），执行lazyload();

下面举例说明：

//注意js引入的先后顺序
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
<img class="lazy" data-original="img/example.jpg" width="1330" height="900"> 
<img class="lazy" data-original="img/example.jpg" width="400"height="200"> //可以尺寸不一致
...//无数张你想要加载的照片
<script>

//开始全局加载
$(function(){ 
   $("img.lazy").lazyload();
 }) 
</script>

比较常用的方法

提前加载——Threshold

lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。

1

2

3

4

5

//自行就加载了 <br data-filtered="filtered">$(function(){

$("img.lazy").lazyload({

threshold :20

});

})

或

1

2

3

4

5

$(window).ready(function(){

$("img.lazy").lazyload({

threshold :20

});

})

事件触发(可以是jquery事件，也可以是自定义事件)——Event

当触发定义的事件时，图片才开始加载

1

2

3

4

5

//使图片点击后，才开始加载<br data-filtered="filtered">$(function(){

$("img.lazy").lazyload({

event : "click"

});

})

同时也可以

1

2

3

4

5

6

7

8

9

10

11

12

//自定义延迟多长时间再触发加载图片。这个类似EasyLazyload.js插件，下面会介绍到

$(function() {

$("img.lazy").lazyload({

event : "sporty"

});

$(window).bind("load", function() {

var timeout = setTimeout(function() {

$("img.lazy").trigger("sporty")

}, 5000);

});

设定效果——Effects

1

2

3

4

//插件默认的加载效果是 show() ,你可以使用任何你想要的效果。比如fadeIn()淡入效果

$("img.lazy").lazyload({

effect : "fadeIn"

});

滚动容器内的图片——container

1

2

3

4

5

6

7

8

9

10

11

<br data-filtered="filtered"><div style="height:600px;overflow:scroll" id="container">

<img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200">

<img class="lazy".../>

</div>

<script>

$(function(){

$("img.lazy").lazyload({<br data-filtered="filtered"> effect:"fadeIn",//顺便添加个效果

container: $("#container")

});

})

</script>

二，EasyLazyload.js

比较全能的延迟加载，不会对样式有影响，最主要可以不用特意去设定图片的width和height（毕竟图片不一致的宽高大有人需要，难不成还真的一个一个去设定？）而且scroll到照片时，有缓冲视觉效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<script src="jquery.min.js"></script>

<script src="EasyLazyload.min.js" >

<div id="container" style=" overflow:scroll; background-color:black;">

<img data-lazy-src="img/1.png">

<img data-lazy-src="img/2.png">

<img data-lazy-src="img/3.png" >

<img data-lazy-src="img/4.png" >

<img data-lazy-src="img/5.png" >

</div>

<script>

//调用全局方法lazyLoadInit（）

lazyLoadInit({

coverColor:"white",//图片即将显示时覆盖层的颜色；

coverDiv:"<h1>test</h1>",//覆盖层可显示的土自定义组件

offsetBottom:0,//图片距离屏幕底部出现时间点的距离差值（注解：延迟加载图片会在图片顶部接触屏幕底部时出现，如果想要让图片顶部距离屏幕底部有一定距离时出现，请设置此值）

offsetTopm:0,//图片距离屏幕底部出现时间点的距离差值（注解：同上，距离顶部）

showTime:1100,

onLoadBackEnd:function(i,e){

console.log("onLoadBackEnd:"+i);

}//图片已经完全出现时的回调函数，参数为（index，event）加载的图片下标，以及dom对象（dom对象为jquerydom或zeptodom对象）

,onLoadBackStart:function(i,e){

console.log("onLoadBackStart:"+i);

}//图片已经下载完成，即将开始显示时的回调函数（参数同上）

});

</script>

关于Easylazyload.js的几个问题

如果是从服务器上请求一系列图片，lazyLoadInit()应该放在哪里触发？在ajax调用成功后 img的src替换完成后调用 lazyLoadInit lazyLoadInit()方法，ajax给img赋值data-lazy-src属性，然后在ajax success 中调用Init方法，不然初始化的时候img的src属性还是空的；

用瀑布流ajax动态加载的图片没有效果，在ajax里的complete方法中调用lazyLoadInit()试试

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/24227.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：一根烤肠多少克

下一篇： lazyload懒加载的使用与避坑