javascript 图片 懒加载、预加载

懒加载与预加载的基本概念。

 懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。

 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

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

 懒加载的意义及实现方式有：

  懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。懒加载的基本思路就是不给img标签写src属性，而是写到一个后边可以操作的属性中，如data-src中，然后在后边需要加载的时候，加载图片，图片地址写到src中.

   实现方式： 

    1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

    2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

    3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

  预加载的意义及实现方式有：

    预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

怎么样才能实现预加载？

我们可以通过google一搜索：可以看到很多人用这种方式进行预加载：代码如下：

function loadImage(url,callback) {    var img = new Image();    img.src = url;    img.onload = function(){        img.onload = null;        callback.call(img);    }}

在google或者火狐下测试 都是正常的 不管我怎么刷新都是正常的，但是在IE6下不是这样的 我点击一下 是正常 再次点击或者重新刷新都不正常。下面的jsfiddle地址：有兴趣的同学可以试试 点击按钮后 弹出正常结果 再次点击在IE6下就不执行onload里面的方法了，接着重新刷新也不行。

为什么其他浏览器正常的：其实原因很简单，就是浏览器缓存了，除了IE6以外(即说opera也会，但是我特意用opera试了下，没有，可能版本的问题吧，或许现在已经修复了。)，其他浏览器重新点击会再次执行onload方法，但是IE6是直接从浏览器取的。

那现在怎么办？最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候，因为不需要等待，这个状态值就直接是表明已经下载了，而从http请求加载时，因为需要等待下载，这个值显示为未完成。这样的话，就可以搞定了。经过google搜索下即介绍：发现有一个为各个浏览器所兼容的Image的属性——complete。所以，在图片onload事件之前先对这个值做一下判断即可。最后，代码变成如下的样子：

function loadImage(url,callback) {    var img = new Image();    img.src = url;    if(img.complete) {  // 如果图片已经存在于浏览器缓存，直接调用回调函数        callback.call(img);        return; // 直接返回，不用再处理onload事件    }    img.onload = function(){        img.onload = null;        callback.call(img);    }}

也就是说如果图片已经在浏览器缓存里面 那么支持直接从浏览器缓存取得直接执行img.complete里面的函数 接着返回.

但是我们可以看到上面的代码：必须等图片加载完成后，可以执行回调函数，也可以说等图片加载后，我们可以获取图片的宽度和高度。那么如果我们想提前获取图片的尺寸那怎么办？上网经验告诉我：浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕，并且不需要预设width与height属性，因为浏览器能够获取图片的头部数据。基于此，只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。代码如下：

var imgReady = (function(){    var list = [],        intervalId = null;    // 用来执行队列    var queue = function(){        for(var i = 0; i < list.length; i++){            list[i].end ? list.splice(i--,1) : list[i]();        }        !list.length && stop();    };        // 停止所有定时器队列    var stop = function(){        clearInterval(intervalId);        intervalId = null;    }    return function(url, ready, error) {        var onready = {},             width,             height,             newWidth,             newHeight,            img = new Image();        img.src = url;        // 如果图片被缓存，则直接返回缓存数据        if(img.complete) {            ready.call(img);            return;        }        width = img.width;        height = img.height;        // 加载错误后的事件         img.onerror = function () {            error && error.call(img);            onready.end = true;            img = img.onload = img.onerror = null;        };        // 图片尺寸就绪        var onready = function() {            newWidth = img.width;            newHeight = img.height;            if (newWidth !== width || newHeight !== height ||                // 如果图片已经在其他地方加载可使用面积检测                newWidth * newHeight > 1024            ) {                ready.call(img);                onready.end = true;            };        };        onready();        // 完全加载完毕的事件        img.onload = function () {            // onload在定时器时间差范围内可能比onready快            // 这里进行检查并保证onready优先执行            !onready.end && onready();            // IE gif动画会循环执行onload，置空onload即可            img = img.onload = img.onerror = null;        };                        // 加入队列中定期执行        if (!onready.end) {            list.push(onready);            // 无论何时只允许出现一个定时器，减少浏览器性能损耗            if (intervalId === null) {                intervalId = setInterval(queue, 40);            };        };    }})();

调用方式如下：

imgReady('http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg',function(){　　alert('width:' + this.width + 'height:' + this.height);});

在实际的生产环境中考虑到自己写的预加载和懒加载的代码的性能不高等问题，这里就可以采用createJS中的preload.js和jquery.lazyload.js两个插件完成资源的预加载和懒加载。
[preload.js官网]：http://createjs.com/preloadjs
[lazyload.js官网]：http://www.appelsiini.net/projects/lazyload

Perishable Press网站近日发表了一篇文章《3 Ways to Preload Images with CSS, JavaScript, or Ajax》，分享了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。下面为译文。

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。

方法一：用CSS和JavaScript实现预加载

实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。

单纯使用CSS，可容易、高效地预加载图片，代码如下：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

将这三个ID选择器应用到(X)HTML元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。

该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间。为了解决这个问题，我们增加了一些JavaScript代码，来推迟预加载的时间，直到页面加载完毕。代码如下：

// better image preloading @ <a href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a>function preloader() {if (document.getElementById) {document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";}}function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {if (oldonload) {oldonload();}func();}}}addLoadEvent(preloader);

在该脚本的第一部分，我们获取使用类选择器的元素，并为其设置了background属性，以预加载不同的图片。

该脚本的第二部分，我们使用addLoadEvent()函数来延迟preloader()函数的加载时间，直到页面加载完毕。

如果JavaScript无法在用户的浏览器中正常运行，会发生什么？很简单，图片不会被预加载，当页面调用图片时，正常显示即可。

方法二：仅使用JavaScript实现预加载

上述方法有时确实很高效，但我们逐渐发现它在实际实现过程中会耗费太多时间。相反，我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法，它们可以很漂亮地工作于所有现代浏览器之上。

JavaScript代码段1

只需简单编辑、加载所需要图片的路径与名称即可，很容易实现：

<div class="hidden"><script type="text/javascript"><!--//--><![CDATA[//><!--var images = new Array()function preload() {for (i = 0; i < preload.arguments.length; i++) {images[i] = new Image()images[i].src = preload.arguments[i]}}preload("http://domain.tld/gallery/image-001.jpg","http://domain.tld/gallery/image-002.jpg","http://domain.tld/gallery/image-003.jpg")//--><!]]></script></div>

该方法尤其适用预加载大量的图片。我的画廊网站使用该技术，预加载图片数量达50多张。将该脚本应用到登录页面，只要用户输入登录帐号，大部分画廊图片将被预加载。 

JavaScript代码段2

该方法与上面的方法类似，也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中，根据程序指令进行编辑即可。

<div class="hidden"><script type="text/javascript"><!--//--><![CDATA[//><!--if (document.images) {img1 = new Image();img2 = new Image();img3 = new Image();img1.src = "http://domain.tld/path/to/image-001.gif";img2.src = "http://domain.tld/path/to/image-002.gif";img3.src = "http://domain.tld/path/to/image-003.gif";}//--><!]]></script></div>

正如所看见，每加载一个图片都需要创建一个变量，如“img1 = new Image();”，及图片源地址声明，如“img3.src = "../path/to/image-003.gif";”。参考该模式，你可根据需要加载任意多的图片。

我们又对该方法进行了改进。将该脚本封装入一个函数中，并使用 addLoadEvent（），延迟预加载时间，直到页面加载完毕。

function preloader() {if (document.images) {var img1 = new Image();var img2 = new Image();var img3 = new Image();img1.src = "http://domain.tld/path/to/image-001.gif";img2.src = "http://domain.tld/path/to/image-002.gif";img3.src = "http://domain.tld/path/to/image-003.gif";}}function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {if (oldonload) {oldonload();}func();}}}addLoadEvent(preloader);

方法三：使用Ajax实现预加载

上面所给出的方法似乎不够酷，那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

window.onload = function() {setTimeout(function() {// XHR to request a JS and a CSSvar xhr = new XMLHttpRequest();xhr.open('GET', 'http://domain.tld/preload.js');xhr.send('');xhr = new XMLHttpRequest();xhr.open('GET', 'http://domain.tld/preload.css');xhr.send('');// preload imagenew Image().src = "http://domain.tld/preload.png";}, 1000);};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。

下面，我们看看如何用JavaScript来实现该加载过程：

window.onload = function() {setTimeout(function() {// reference to <head>var head = document.getElementsByTagName('head')[0];// a new CSSvar css = document.createElement('link');css.type = "text/css";css.rel  = "stylesheet";css.href = "http://domain.tld/preload.css";// a new JSvar js  = document.createElement("script");js.type = "text/javascript";js.src  = "http://domain.tld/preload.js";// preload JS and CSShead.appendChild(css);head.appendChild(js);// preload imagenew Image().src = "http://domain.tld/preload.png";}, 1000);};

这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。

参考:http://www.cnblogs.com/Leo_wl/p/3526254.html

http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-css-javascript-ajax