lazyload.JS实现图片异步延迟加载

前言：不少时候网站上不少图片一次性加载会很慢很卡……这个能够帮助你

使用场景：个人使用场景是点击图片再加载图片。

地址：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

网站：https://github.com/tuupola/jquery_lazyload

使用很简单，他自己是Jquery插件JS写的，依赖于JS只须要引入就能够了。

引入JS

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

使用：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">

以上2种写法是同样的，只是一个把默认图片放在了标签上，一个放在了后面事件中。

src：是默认显示的图片。

data-original：是真实地址的图片。

使用方法：

$("img.lazy").lazyload();// 最简单的使用方法

$("img.lazy").lazyload({effect: "fadeIn", failure_limit: 6, effect_speed: 1000,placeholder:"../css/jquerymobile/images/defImg.jpg"});

这个就能够把默认图片不写在img标签上而是最后绑定事件中放上去，这句话意思是在页面渲染完成后给样式是lazy的img标签组建添加异步加载事件。

$("img.lazy").lazyload({effect: "fadeIn", failure_limit: 6, effect_speed: 1000,event : "click",placeholder:"../css/jquerymobile/images/defImg.jpg"});

这个和上面那个几乎是同样的只是点击才会加载真实地址图片。

参数解析：

effect：显示动画（fadeIn/……）还有一些能够网上搜下。

effect_speed：动画时间，默认400毫秒。

failure_limit：默认加载多少张图片（滚动会自动在加载后面的，也就是可视范围内的图片）。

click：事件，点击事件加载图片能够用（还有鼠标一上去各类事件都是能够的）。

placeholder：默认加载的图片地址（也能够在img标签src内写）。

还有不少不少……网络上不少不少……

参考连接：http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/