页面有大量图片，优化图片的加载方法

1.　图片懒加载，在页面上的未可视区域能够添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。

　　什么是图片懒加载问题：

　　对于图片过多的页面，为了加速页面加载速度，
因此不少时候咱们须要将页面内未出如今可视区域内的图片先不作加载， 等到滚动到可视区域后再去加载。
这样子对于页面加载性能上会有很大的提高，也提升了用户体验。

如何实现

　　其实原理上很简单，在页面载入的时候将页面上的img标签的src指向一个小图片， 把真实地址存放在一个自定义属性中，这里我用data-src来存放，以下。

<img src="loading.gif" data-src="http://xxx.ooo.com" /> 

而后将页面img标签获取并保存，开启一个定时器，遍历保存的img标签，
判断其位置是否出如今了可视区域内。若是出如今可视区域了那么就把真实的src地址给赋值上。
而且从数组中删除，避免重复判断。 那么你可能会问，如何判断是否出如今可视区域内吗？
那就是你能够获取当前img的相对于文档顶的偏移距离减去scrollTop的距离，
而后和浏览器窗口高度在进行比较，若是小于浏览器窗口则出如今了可视区域内了，
反之，则没有。

实现：

　　这是来自一个老外的一段懒加载的代码，代码很小，1k不到，
很适合用在移动设备上，在兼容上没作ie下的兼容，
这个你如要要用，你也能够本身去实现一个兼容性更强的。

好了，直接上代码了。（目前没有测试，仅仅参考而已）

 

 1 /*! Echo v1.4.0 | (c) 2013 @toddmotto | MIT license | github.com/toddmotto/echo */
 2 window.Echo = (function (window, document, undefined) {
 3 
 4   'use strict';
 5 
 6   var store = [], offset, throttle, poll;
 7 
 8   var _inView = function (el) {
 9     var coords = el.getBoundingClientRect();
10     return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
11   };
12   var _isDeal = function(el){
13       return el.getAttribute('src') === el.getAttribute('data-echo');
14   }
15   var _pollImages = function () {
16     for (var i = store.length; i--;) {
17       var self = store[i];
18       if (!_isDeal(self) && _inView(self)) {
19         self.src = self.getAttribute('data-echo');
20         store.splice(i, 1);
21       }
22     }
23   };
24 
25   var _throttle = function () {
26     clearTimeout(poll);
27     poll = setTimeout(_pollImages, throttle);
28   };
29 
30   var init = function (obj) {
31     var nodes = document.querySelectorAll('[data-echo]');
32     var opts = obj || {};
33     offset = opts.offset || 0;
34     throttle = opts.throttle || 250;
35 
36     for (var i = 0; i < nodes.length; i++) {
37       store.push(nodes[i]);
38     }
39 
40     _throttle();
41 
42     if (document.addEventListener) {
43       window.addEventListener('scroll', _throttle, false);
44     } else {
45       window.attachEvent('onscroll', _throttle);
46     }
47   };
48 
49   return {
50     init: init,
51     render: _throttle
52   };
53 
54 })(window, document);

 

另一个懒加载方法：

注意事项：须要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同，则只是一个特效而已，并不达到延迟加载的功能。

使用方法

载入 JavaScript 文件

<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 

修改 HTML 代码中须要延迟加载的 IMG 标签

<!-- 将真实图片地址写在 data-original 属性中，而 src 属性中的图片换成占位符的图片（例如 1x1 像素的灰色图片或者 loading 的 gif 图片） 添加 class="lazy" 用于区别哪些图片须要延时加载，固然你也能够换成别的关键词，修改的同时记得修改调用时的 jQuery 选择器 添加 width 和 height 属性有助于在图片未加载时占满所须要的空间 --> <img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">

http://code.ciaoca.com/jquery/lazyload/ 

调用 Lazy Load

$('img.lazy').lazyload();

2.　若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。

预加载，见下一章节

3.　若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

4.　若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。

5.　若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。