当我们网站的页面图片过多时，加载速度就会很慢。尤其是用手机2G/3G访问页面，不仅页面慢，而且还会用掉很多流量。我们主题之前也都采用了图片的懒加载形式，但都不完美，部分主题还采用了占位图片来控制懒加载，今天换一种js图片懒加载，它原理就是将页面内所有需要加载的图片全部换成一张默认的图片（一般尺寸很小），只有图片在可视区域才去请求加载，这样的话应该就能满足我们日常所需，好了不说废话先按照教程操作试试，后期主题会逐一更新，稍安勿躁！！！
实现原理
<img class="lazy" src="loading.png" data-src="img/example.jpg">
页面打开时首先会加载src里的图片，即很小的加载图；通过监听scroll事件，当图片在可视区域时，使用data-src替换src，加载真正的图片。
使用
实际使用时一般使用已经存在的插件，如lazyload插件。
lazyload插件网上能搜出很多，常见的是： 1、jquery.lazyload.js: 依赖jQuery
JavaScript
代码语言：javascript复制/*!
* 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
2、lazyload.js: 依赖jQuery或者Zepto
JavaScript
代码语言：javascript复制/*!
* 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
1、引入
Markup
代码语言：javascript复制<script src="jQuery.js"></script><script src="lazyload.min.js"></script>2、使用
Markup
代码语言：javascript复制<!--lazyload.js默认懒加载原图片属性是data-original--><img class="lazy" src="loading.png" data-original="img/example.jpg">
$(".lazy").lazyload();3、配置
缺省：
JavaScript
代码语言：javascript复制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 IE67 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({})内配置}YAML复制全屏
}示例：
JavaScript
代码语言：javascript复制$(function() {
$(".lazy").lazyload({
effect : "fadeIn",//效果
data_attribute : 'src',//可以改成src，即对应data-src属性
event: 'scroll',//默认值
container: $(".content"), //一般无需指定，即window。sui框架里必须指定
});
});代码记录完成，测试几天看看效果，如无问题后续逐一更新，如遇问题依情况而定，好了，假期回来之后工作肯定不少，抓紧时间工作去吧，有问题留言反馈！
