前言
优化！ 又是优化！php
切图崽们做为整个web应用的纽带，链接着用户行为和机器性能. 而优化的最终意义，在于在这二者之间取得一个最佳的平衡点.html
对于图片资源的加载来讲，更是如此. 今天咱们就来简单说说，项目开发中常见的图片加载优化方式.jquery
预加载
1.遮罩大法
咱们常常用jquery, jquery中$(function){})其实是DOMContentLoaded事件完成的回调，只是完成了DOM树的构建. 诸如Css的渲染以及页面内图片等资源的下载不必定完成了.因此若是此时呈现页面，页面会很是难看.web
为了解决这个问题，为了从设计和行为的角度提升用户体验，咱们能够在图片等重要资源彻底下载完以前，对页面加上较为美观的遮罩，而且弹出loading提示告知用户资源正在loading.等到图片彻底加载完，才移除遮罩和加载动画.性能
具体的实现思路以下:优化
$(function(){})调用以后，先弹出蒙板加上loading动画用来提示用户正在loading中动画
对页面中须要预加载的IMG元素进行下载
var img = new Image(); img.src="xx.jpg"设计图片下载完成会有一个onload的回调
img.onload = function(){...}code在这个回调中移除loading动画以及遮罩htm
这样就能够给用户带来顺滑如丝般的操做体验了，不再用担忧用户看到那些正在下载的未显示彻底的丑的要死图片了.
咱们的口号是: 要么就不给你看，要么就给你看最好的
应用场景: 请在"首屏中存在图片的动画，或者和你对接的UI设计师极其强势"的状况下使用
2.有码大法
有码大法和遮罩大法略微有区别,具体实现思路以下:
首先对你须要预加载的图片准备两张,一张是高清一张低清. 好比girl_hd大小为60kb. 另外一张是girl, 大小是6kb.
html页面中须要预加载的image标签的src地址写的是低清的地址
<img src="girl.jpg" class="hd-replace">由于低清图很小，很快就能被加载出来.
$(function(){})调用以后，获取页面须要高清替换的img的src(girl.jpg),以此src为基准拼接字符串(+'_hd.jpg')得到高清图的地址(girl_hd.jpg)，而后用下载该高清图
var img = new Image(); img.src=“girl_hd.jpg”图片下载完成会有一个onload的回调
img.onload = function(){...}回调中替换掉页面中img的src, 因此如今页面上的image标签为
<img src="girl_hd.jpg" class="hd-replace">
咱们的口号是: 想看无码高清，请先看有码低清
应用场景: 请在"首屏中出现大量图片，且尺寸都不小"的状况下使用
懒加载
若是你仔细看了上面预加载的思路，必定往我脑壳上拍砖: 遮罩大法也好，有码大法也好，这并无提升项目的加载速度啊，最后该下载的图片还不是得下载. 没错，懒加载只是改变了用户的操做感觉，实际上项目的加载速度并无提升. 可是，如今要说的懒加载，但是实实在在的提升了项目的加载速度哦.
什么是懒加载，一句话来解释， 就是图片按需加载.
你们必定刷过微博，微博的照片墙就是懒加载的最佳示例.一开始显示的照片并很少，只有用户下拉，拉到底部的位置， 照片墙才会被拉长，新的图片才会被加载.
操做思路:
监听
滚动条scroll事件(固然touchmove事件也能够)每次事件触发的时候，判断当前照片墙的位置
若是照片墙已经被刷到了底部某个临界位置点
Js下载新出现的图片，
var img = new Image(); img.src="xx.jpg"下载完成有一个onload的回调
img.onload = function(){...}在下载完成的回调中向页面中插入已经下载好的图片
固然，根据项目不一样，会有各类各样的懒加载方式.但核心是不变的:即页面初始加载的时候，只加载知足用户需求的最小数量的资源. 拿照片墙举例，可能用户的微博里有500张照片，若是你在页面加载的时候就加载500张，用户会卡到爆炸(由于后台一直处于图片下载状态). 若是页面加载的时候只初始加载20张图片，其余的图片经过用户本身的操做(滚动下拉)，来按需加载，会极大提高项目运行的流畅程度.
结语
虽然预加载仍是懒加载实现原理都很是简单，给个人启示确是巨大的:
预加载除了改善用户的操做感觉，其深层次的核心其实在于:对资源进行碎片化加载, 即预加载其实能够出如今任什么时候间段，当用户鼠标很长时间没移动的时候，我可不能够偷偷下载两张图片？在用户目前没有进行大量运算操做的时候，我可不能够偷偷下载两张图片？当用户当前在一个很精简的登录界面的时候，我可不能够偷偷下载他登录成功跳转到的页面的几张图片？等等等等懒加载的深层次核心在于:按需, 按需这个词已经被深深入在我脑子里了. 如今回想起来，不少不少优化方式都是围绕着按需来展开的.按需加载Js,按需加载图片等等
首先，咱们必须保证项目第一时间的加载速度，能让用户在最短的时间内看到页面和内容.
其次，尽可能保证当前页面的精简程度，不去作无心义的加载. 只有当用户真正须要时，咱们才展示给他.
各自的优缺点在于:
预加载：
优势:若是提早下好了图片，等到这张图片须要用到时，能够秒开.
缺点:下载图片的时候会影响项目的加载完成时间，会影响项目运行的流畅程度
懒加载在于:
优势: 保证用户加载的项目是最精简的，最快的， 所下载资源是最少的
缺点: 若是用户的操做触发了懒加载，那么须要等待资源下载到完成的时间,同时资源下载期间,操做流畅度下降
说到底，项目的优化是没有银弹的，这一部分的高效极可能致使另外一部分的低效.A项目的优化方法照搬来B项目可能一文不值.
因此咱们切图崽们能作的，就是深入理解这些技术的原理，而且在项目中吸取经验，只有深入地理解了各项技术的优劣，只有深入的理解了用户的需求以及行为习惯，才能针对特定的项目，特定的场景，进行最适合的处理.