lazyload.js(lazyload.js)
一、vue-lazyload 源码解析
/src/lazy.js
定义变量接收实例化参数。
lazy.js默认导出一个函数，该函数返回一个 Lazy类，形成闭包，保持对 Vue的引用。
判断是否支持Webp图片
/src/listener.js
定义变量接收实例化参数。
filter方法将配置的 filter对象中的方法执行，接收两个参数，一个为 ReactiveListener实例，一个为 options参数对象。
initState方法给元素添加 data-set属性，值为图片地址 src，并且定义了图片状态对象 state。在 Lazy中已经根据像素比选择了最适配屏幕的图片，顾这里不需要考虑 srcset属性。另外，我们自定义指令是 v-lazy，到目前为止，还没有给图片的 src属性赋值。
render方法，是在 Lazy中实例化 ReactiveListener时传递过来的参数。
回过头再来结合 lazy.js中的 lazyLoadHandler方法与 ReactiveListener暴露的方法来看。
/src/lazy-container.js
LazyContainer的核心是 container下的选择器selector(默认 img标签)遍历后调用 lazy的 add方法进行绑定，自定义指令 v-lazyload-container。
/src/lazy-component.js
上述实现元素绑定主要是通过自定义指令 v-lazy， v-lazy-container。那么 LazyComponent则是通过注册的 lazy-component组件，完成绑定，默认渲染成为 div标签，作为 img的容器。
/src/lazy-image.js
通 LazyComponent组件，只不过 LazyImage注册的 lazy-image组件，渲染成的是 img标签，多了 src属性。
通过自定义指令 v-lazy将设置背景图的元素或者 img元素，通过 _addListenerTarget方法收集与数组 TargetQueue中，并遍历触发懒加载的方法， addEventListener绑定在该元素上，触发的事件为 lazyLoadHandler；
在需要懒加载的元素上设置属性 data-src，这是期望的图片地址(filter配置项可以预先过滤赋值)，元素上自定义 lazyLoad表示图片状态(状态变更后，adapter中触发回调)；
ListenerQueue数组中收集的是 ReactiveListener类的实例，主要是用于懒加载不同状态下的图片加载，loading- loaded- error；
当触发 EventListener了，执行 lazyLoadHandler方法，根据算法，进入 viewport后， ReactiveListener元素如果与触发元素匹配，则进行图片的加载及渲染。
二、Slick.js使用方法(响应式轮播插件)
简介
slick是一个基于 jQuery的响应触摸式幻灯片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特点：
支持响应式
浏览器支持 CSS3时，则使用 CSS3过度/动画
支持移动设备滑动
支持桌面浏览器鼠标拖动
支持循环
支持左右控制
支持动态添加、删除、过滤
支持自动播放、圆点、箭头、回调等等
兼容
浏览器兼容：兼容 IE7+及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。
jQuery兼容：兼容 1.7及以上版本。
使用方法
1、引入文件
<link rel="stylesheet" rel="external nofollow" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>
注意：需jQuery 1.7+
2、HTML
<div class="slick">
<div><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><img src="images/1.jpg" alt=""></a></div>
<div><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><img src="images/2.jpg" alt=""></a></div>
<div><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><img src="images/4.jpg" alt=""></a></div>
<div><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><img src="images/3.jpg" alt=""></a></div>
</div>
3、JavaScript
$(function(){
$('.slick').slick({
dots: true
});
});
参数
参数类型默认值说明
accessibility布尔值true启用Tab键和箭头键导航
autoplay布尔值false自动播放
autoplaySpeed整数3000自动播放间隔
centerMode布尔值false中心模式
centerPadding字符串’50px’中心模式左右内边距
cssEase字符串‘ease’CSS3动画
customPagingfunctionn/a自定义分页
dots布尔值false指示点
draggable布尔值true启用桌面拖动
easing字符串‘linear’animate() fallback easing
fade布尔值false淡入淡出
arrows布尔值true左右箭头
infinite布尔值true循环播放
lazyLoad字符串‘ondemand’延迟加载，可选 ondemand和 progressive
onBeforeChange(this, index)methodnull开始切换前的回调函数
onAfterChange(this, index)methodnull切换后的回调函数
onInit(this)methodnull第一次初始化后的回调函数
onReInit(this)methodnull再次初始化后的回调函数
pauseOnHover布尔值true鼠标悬停暂停自动播放
responsiveobjectnull断点触发设置
slide字符串‘div’滑动元素查询
slidesToShow整数1幻灯片每屏显示个数
slidesToScroll整数1幻灯片每次滑动个数
speed整数300滑动时间
swipe布尔值true移动设备滑动事件
touchMove布尔值true触摸滑动
touchThreshold整数5滑动切换阈值，即滑动多少像素后切换
useCSS布尔值true使用 CSS3过度
vertical布尔值false垂直方向
方法
方法Argument说明
slick()options: object初始化 slick
unslick() 销毁 slick
slickNext() 切换下一张
slickPrev() 切换上一张
slickPause() 暂停自动播放
slickPlay() 开始自动播放
slickGoTo()index: int切换到第 x张
slickCurrentSlide() 返回当前幻灯片索引
slickAdd()element: html or DOM object, index: int, addBefore: boolAdd a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove()index: int, removeBefore: boolRemove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter()filter: selector or functionFilters slides using jQuery.filter syntax
slickUnfilter() Removes applied filter
slickSetOption(option,value,refresh)option: string(option name), value: depends on option, refresh:布尔值Sets an option live. Set refresh to true if it is an option that changes the display
三、什么是ImageLazyLoad技术
什么是ImageLazyLoad技术
在页面上图片比较多的时候，打开一张页面必然引起与服务器大数
据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条
下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。
怎么实现ImageLazyLoad
一、使用JQuery插件，插件名: jquery.lazyload（7kb大小），压缩后（3kb大小）
在线压缩js
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:
1.导入JS插件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript：
$("img").lazyload();
这将会使所有的图片都延迟加载。
当然插件还有几个配置项可供设置。
1.改变threshold
$(“img”).lazyload({ threshold: 200});
把阀值设置成200意思就是当图片没有看到之前先load 200像素。
2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
复制代码代码如下:
$("img").lazyload({
placeholder:"img/grey.gif",
event:"click"
});
3.可以通过定义effect参数来定义一些图片显示效果
复制代码代码如下:
$("img").lazyload({
placeholder:"img/grey.gif",
effect:"fadeIn"
});
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致；
缺陷：
1.与Ajax技术的冲突；
2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3.写代码不规范的同学要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad
大家可以直接采用淘宝的延迟加载技术:(2kb大小)
调用方法也是很简单的：
<script src=""
type="text/javascript"></script>
<script type="text/javascript">//
<![CDATA[KISSY.ImageLazyload();// ]]></script>
注：该脚本依赖 yahoo-dom-event,页面中需要加载 yui 2.x,你也可以直接引用下面的地址:
<script
src=""
type="text/javascript"></script>
配置参数如下：
复制代码代码如下:
<script type="text/javascript">
KISSY.ImageLazyload({
mod:"manual",//延迟模式。默认为 auto
diff: 200//当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载
});
</script>
manual模式时，需要手动将页面中需要延迟加载的图片的 src属性名更改为 data-lazyload-src.比如 SRP页面，宝贝列表的后20个图片延迟加载。输出时，html代码为：
<img data-lazy-src="path/to/img" alt="something"/>