码迷,mamicode.com
首页 > 其他好文 > 详细

图片懒加载

时间:2015-07-27 22:51:50      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

lazyload用来加载比较长的页面中的图片,直到下拉到显示他们为止,页面太长的时候使用它可以加快页面显示的速度。

1.使用它

使用它只需要引用两个文件,如下:

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

还要在img的标签中添加一个属性,还要给这个img添加一个名字,代码如下:

<img class="lazy" src=‘../../images/defaultpic.jpg‘ data-original="img/example.jpg" width="640" height="480">

$(function() {
    $("img.lazy").lazyload();
});

 

2.添加一个阀值

可以让它在还未显示在屏幕上之前先记载200个像素,代码如下:

$("img.lazy").lazyload({
    threshold : 200
});

3.事件出发

使用click或者onmouseover触发加载

$("img.lazy").lazyload({
    event : "click"
});

 

图片懒加载

标签:

原文地址:http://www.cnblogs.com/tylerdonet/p/4681368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!