jquery.lazyload.js 已封装

H-ui.js 中已封装,无需单独下载。单独下载地址 jquery.lazyload.js

Lazy Load是一个用js编写的jQuery插件,用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载,没有滚动到的区域img标签上会有一个占位图片,而真实图片不会被载入。当页面比较长,图片比较多的时候,延迟加载图片可以加快页面加载速度,在某些情况下降低服务器负担。

使用方法

1、lazyload.js依赖jquery或者zepto.js。

2、将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如:lazyload,方便js调用。

<img class="lazyload" alt="" width="1000" height="60" data-original="http://images.h-ui.net/www/AD-1000x60.gif" />

js调用

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

demo效果

相关参数

属性 默认值 描述 备注
threshold 0 临界点 可以设置>0的数值,让图片距离屏幕一定像素时提前加载。
failure_limit 0 当图像不连续时 滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布。特殊布局请设高参数。
container window 触发可滚动的容器 默认是浏览器的滚动条,也就是window。可以自定义带滚动条的 DIV 元素。如:$("#container")
event scroll 设置事件来触发加载 click、mouseover可自定义事件
effect show 载入特效 fadeIn(淡入效果)
skip_invisible true 加载隐藏的图片 默认忽略了隐藏图片,可以设置为false加载隐藏图片
placeholder data:image/png;base64,iVBOR…… 默认的占位图片 可以直接把占位的图片路径赋给img的src