lazy load 是一个用 javascript 编写的 jquery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
怎样使用?
Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1×1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
处理图片的代码如下.
$("img.lazy").lazyload();
这将使所有 class 为 lazy 的图片将被延迟加载. 可以参考基本选项 demo
设置敏感度
几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写
620
收藏
