图片预加载实现

特点##

Paste_Image.png

无序加载-实例1相册##

页面结构：

Paste_Image.png

效果：
只有当所有的图片 都加载完毕之后，loading页才会被隐藏掉

Paste_Image.png

index = Math.max(0,--index);  
//Math.max返回最大值，把0和当前index比较，如果当前index<0，则等于0，不能再显示上一张

js部分

Paste_Image.png

新建一个image对象

var  imgObj = new Image();

预加载的具体实现：
如果有些图片加载没有成功，那么count就无法等于len-1，loading页就永远无法消失，所以无论成功加载与否，都要往下执行，因此图片要多一个error监听事件。预加载完成之后，便可以通过缓存来获取

Paste_Image.png

做成插件###

复用性。
一般情况下，将插件写在局部作用中，使他和外部内容互不干涉，js没有局部作用域，一般使用闭包来模拟局部作用域

闭包的形式

在里面定义的变量都是局部的，不会和外面已有的变量冲突

传递jq对象，使用$接收，这样在函数内部就可以使用$符号，

当图片只有一张时，参数imgs就是字符串而不是数组，此时我们要将它封装成一个数组；如果没有传入所需的参数，则用默认的

Paste_Image.png

函数名加下划线，表示仅在内部使用，不提供外部调用

判断scr，如果不是字符串就返回

Paste_Image.png

如果没有传入each，那么opts.each就为默认的null，直接执行会报错，所以在执行opts.each函数时，要先判断

Paste_Image.png

完整代码###

Paste_Image.png

-------------以上完成了面向对象的部分，封装成了一个类-----------
jq的两种插件形式

$.fn.extend     //先选中一个元素，再调用
$.extend         //工具函数，全局的

->后面是不同的形式的调用方式

Paste_Image.png

Paste_Image.png

此插件不需要选用元素，所以用第二种方式

调用插件

Paste_Image.png

无序加载-实例2qq表情##

没有预加载

Paste_Image.png

使用预加载之后的效果

使用预加载之后的效果

ctrl+shift+d 复制当前行
选中代码，ctrl+shift+p 输入wrap，添加父容器
或者直接使用快捷键：ctrl+shift+G

text-indent:20px;

页面结构

Paste_Image.png

js部分
图片的路径，利用循环

Paste_Image.png

利用之前的插件，加载完成之后，动态添加dom结构，覆盖loading提示信息，

Paste_Image.png

去掉点击a标签时出现的外边框

加载太快，看不到效果，此时可以 延迟显示

事件冒泡###

点击btn时，冒泡到document，也会执行document的点击事件

Paste_Image.png

禁止事件冒泡

e.stopPropagation();

完整代码

Paste_Image.png

Paste_Image.png

有序预加载##

页面结构：与实例1相册相似

c9b015a050a49aad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
js部分
思想：回调，当第一张图片加载完成之后，调用load()继续加载

为按钮添加点击事件

为按钮添加点击事件

完善预加载插件-合并有序和无序的情况##

添加参数，默认为无序

Paste_Image.png

在原型上增加_ordered函数

Paste_Image.png

使用插件进行有序加载

总结##

Paste_Image.png