关于懒加载及项目中图片优化

懒加载：

在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端 的距离与页面的距离，如果前者小于后者，优先加载。 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。 如果图片为css 图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64 等技术。 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致。

介绍一款懒加载插件：lazyload
地址：https://vvo.github.io/lazyload/

---

关于项目中图片处理的相关优化

首先了解在 web开发中常见的图片有那些格式。JPG 通常使用的背景图片，照片 图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种 格式。PNG 这种格式的又分为两种 一种 PNG-8，一种 PNG-24。PNG-8格式不支持 半透明，也是 IE6兼容的图片存储方式。 PNG-24 图片质量要求较高的半透明或全透明背景， 保存成PNG-24 更合适（为了兼容 IE可以试用 js 插件pngfix）一般是背景图标中使用的 多。GIF 这种格式显而易见的是在需要gif 动画的时候使用了。2．优化方案 样式代 替图片例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持， 而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。 精灵图CSSSprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。 字体图标 IconFont，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览 器，减少页面请求等。美中不足的是只支持纯色的 icon。SVG，对于绝大多数图案、图标 等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可 放心使用！ Base64将图片转化为 base64编码格式，资源内嵌于CSS 或HTML 中， 不必单独请求。Base64 格式 data：[][；charset=][；base64]，Base64 在CSS中的使 用.demoImg{ background-image： url(“data：image/jpg；base64， /9j/4QMZRXhpZgAASUkqAAgAAAA L….”)； }Base64 在HTML中的使用<img width="40" height="30" src="data：image/jpg；base64， /9j/4QMZRXhpZgAASUkqAAgAAAAL...." />图片响应式通常图片加都是可以通过 lazy加载的形式来的，那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图 的目的来达到优化。像资源的优化方法