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

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

        });

    })

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);

});

1

2

3

4

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

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

    effect : "fadeIn"

});

1

2

3

4

5

6

7

8

9

10

11

<!--滚动容器内的图片。下面的p拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载--><br data-filtered="filtered"><p 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".../>

</p>

<script>

    $(function(){

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

            container: $("#container")

        });

    })

</script>

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

<!--先引入Easylazyload.js-->

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

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

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

<!--把你想要的图片来源src换成data-lazy-src-->

<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" >

</p>

<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>