课程前言：

慕课网 -- 图片预加载

图片预加载的特点：

（ 1、网站的Loading页  2、局部图片的加载--表情插件  3、漫画网站  ）

（图片过多时，会提高加载时间，降低性能）

1. 预知用户将要发生的行为，提前加载用户所需图片；2. 更好的用户体验；

图片预加载又分为有序加载和无序加载，根据网站或功能模块使用，提高用户体验。

预加载与懒加载：

图片预加载顾名思义图片预加载就是在网页全部加载之前提前加载图片。当用户需要查看时可直接从本地缓存中渲染以提供给用户更好的体验减少等待的时间。否则如果一个页面的内容过于庞大没有使用预加载技术的页面就会长时间的展现为一片空白这样浏览者可能以为图片预览慢而没兴趣浏览把网页关掉这时就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。

图片懒加载缓载延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化减少请求数或延迟请求数。

二、图片预加载与懒加载的区别

两者的行为是相反的一个是提前加载一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用预载则会增加服务器前端压力。

图片预加载实例：

data-属性的写法是在html5中新加的一种自定义属性书写方式。JQuery可以通过.data('名称')进行获取,href="javascript:;"空链接

cmd +d 复制上一行 #id .class data-control 

样式中，tac -- text-align:center; 因为 a 标签为内联标签，因此，需要将其设置为 display-inline 为block ,才可以为它设置宽高。按钮不给宽度，只给高度，用padding来给出宽度。mr50 --- margin-right:50px; 图片太大了，就给img设置宽，那高就会等比例缩放。

上一张下一张不能点击生效的，把所有代码写在$(function(){})里边试试。$(function(){    ...   })

index=Math.max(0,--index);  Math.max (,,,,,)返回其中所有待比较数据的最大值，我们点击上一张图片时，就将当前的index先减减，然后，再跟0比较，如果已经比0小，就返回0.

index =Math.min(length-1,++index); 返回最小的那个咯，这个是下一张时，index可能加的超过length的长度，因此，就做了判断。

鼠标点击事件

图片加载页(＾－＾)V

样式上：占满整个可视区域，不应该随着鼠标的滚动而上下移动，于是，就是固定定位，top和left都是0，给它的宽高都是100%，但它的百分比是继承父类或者父类的父类，所以，要给它们设定高为100%。

功能上：图片预加载是将所有的图片都加载出来。用new操作符 就是创建一个构造函数的实例，Image是内置的一个构造函数。得到Image的实例后，就可以在这个实例上监听事件，这里用到的事件是load 和 error。

效果上：$.each()中的每一个元素，都执行如下的操作：先定义了图片对象，而该对象，有两个默认的方法，加载成功和加载失败，为了不卡住，无论是成功还是失败，都执行操作：将页面.progress 里的 内容替换为 一个 百分比，count+1 是当前的图片预加载的进度，用Math.round 取整后，再*100，变为百分数。接下来做出判断，如果当前的加载进度，已经为 图片的总长度，就将loading页隐藏，并将title的提示改为第一张图片。如果判断之后发现没有超过，就将加载进度加1，继续加载下一张图片咯。当前，我们不是要讲每一张图片对象的src属性赋值是 数组里的src 呢。

最普通的实现咯

疑难解答：

为什么"给图片绑定onload事件"要在"给图片的src属性赋值"之前？

JS内部是按顺序执行的（可以认为是同步执行），假设"给图片的src属性赋值"在"给图片绑定onload事件"之前，JS解释器会先执行赋值语句，src属性被赋值后图片开始下载，但解释器不会等待图片加载完毕后再执行下一条语句，因为加载图片这个过程是异步的（就像你可以一边蹲坑一边玩王者毒药，当然一边放大一边吸毒很不好）。也就是说图片加载的同时，可以执行"给图片绑定onload事件"，不过加载图片这个异步过程可能在"给图片绑定onload事件"之前就完成了（比如浏览器缓存了图片），此时图片加载完成后还没有给图片绑定onload事件，也就是说图片加载完成后什么也不会发生。

总而言之，"给图片绑定onload事件"应在"给图片的src属性赋值"之前，这样就可以保证图片加载完成后触发onload事件。

组件化开发：

动力：可以解决当前问题，但没有复用性，因此要组件化开发。（我们将插件写在局部作用域中，使他们与外界互不干涉，互不影响；但JS没有局部作用域的说法，我们用 闭包 来模仿。）

(function(){……})()   在它里面定义的变量都是局部的，就不会和外面的变量冲突了。外面的括号里传递Jquery对象，里面的括号用 $ 符号来接收，这样我们就可以在里面使用jQuery对象了。

面向对象的方法来完成一个插件时，首先就是对象的构造函数。

组件化：

构造方法

默认方法

面向对象原型，重点来咯：

执行咯

利用jquery创建插件的两种方式，和调用形式。封装出来方便使用：（对我而言，我不是很懂☹️）

可以使用了

如何使用呢？

可以使用了

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。

2.jQuery.fn.extend(object);给jQuery对象添加方法。

jQuery.fn.extend = jQuery.prototype.extend

留下小作业：

组件的封装，自己要来补一补~