JS图片懒加载

简介

当页面图片太多时，加载速度就会很慢。尤为是用2G/3G/4G访问页面，不只页面慢，并且还会用掉不少流量。图片懒加载的原理就是将页面内全部须要加载的图片所有换成一张默认的图片（通常尺寸很小），只有图片在可视区域才去请求加载。

实现原理

<img class="lazy" src="loading.png" data-src="img/example.jpg">

页面打开时首先会加载src里的图片，即很小的加载图；经过监听scroll事件，当图片在可视区域时，使用data-src替换src，加载真正的图片。

使用

实际使用时通常使用已经存在的插件，如lazyload插件。

lazyload插件网上能搜出不少，常见的是：
一、jquery.lazyload.js: 依赖jQuery

/*! * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2015 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * http://www.appelsiini.net/projects/lazyload * * Version: 1.9.7 * */

http://www.appelsiini.net/projects/lazyload

二、lazyload.js: 依赖jQuery或者Zepto

/*!
 * An jQuery | zepto plugin for lazy loading images. * author -> jieyou * see https://github.com/jieyou/lazyload * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD) * use component's throttle https://github.com/component/throttle (MIT) */

下载：https://github.com/52fhy/lazyload

以上两者用法是同样的，第二个基于第一个修改，以支持zepto。如今以第二个示例：

lazyload.js

一、引入

<script src="jQuery.js"></script> <script src="lazyload.min.js"></script>

二、使用

<!--lazyload.js默认懒加载原图片属性是data-original--> <img class="lazy" src="loading.png" data-original="img/example.jpg">

$(".lazy").lazyload();

三、配置
缺省：

defaultOptions = {
    threshold : 0, //图像提早多少加载，单位px failure_limit : 0, event : 'scroll', //触发事件 effect : 'show', //效果 effect_params : null, //effect的参数数组 container : w, //使用容器，默认是window data_attribute : 'original', //能够改为src，即对应data-src属性 data_srcset_attribute : 'original-srcset', skip_invisible : true, appear : emptyFn, load : emptyFn, vertical_only : false, //竖直方向滚动的页面中使用 check_appear_throttle_time : 300, url_rewriter_fn : emptyFn, no_fake_img_loader : false, placeholder_data_img : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC', // for IE6\7 that does not support data image placeholder_real_img : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png' // todo : 将某些属性用global来配置，而不是每次在$(selector).lazyload({})内配置 }

示例：

$(function() { $(".lazy").lazyload({ effect : "fadeIn",//效果 data_attribute : 'src',//能够改为src，即对应data-src属性 event: 'scroll',//默认值 container: $(".content"), //通常无需指定，即window。sui框架里必须指定 }); });

参考：
一、jQuery延迟加载(懒加载)插件
http://www.w3cways.com/1765.html
二、Zepto picLazyLoad Plugin，图片懒加载的Zepto插件、
http://ons.me/484.html
三、手机网站实现图片惰性加载 | UC优视用户研究与体验设计中心-R.E.D
http://red.uc.cn/?p=1052
四、jQuery.lazyload详解
http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html
五、jieyou/lazyload: 一个jQuery或zepto的图片延迟加载插件
https://github.com/jieyou/lazyload
六、javascript图片懒加载与预加载的分析 - HackerVirus - 博客园
http://www.cnblogs.com/Leo_wl/p/3526254.html

 

 

 

我的公众号谢谢各位老铁支持

本人qq群也有许多的技术文档，但愿能够为你提供一些帮助(非技术的勿加)。

 

QQ群：   281442983 (点击连接加入群：http://jq.qq.com/?_wv=1027&k=29LoD19) 

 

个人淘宝店，能够进去逛逛噢：https://shop108912636.taobao.com/index.htm?spm=2013.1.w5001-7867000954.3.1d29318dPlLar7&scene=taobao_shop