很多high-res图像真的可以使 Web 站点更加整洁。但是它们也会使站点的访问速度变慢——图像是文件，文件使用带宽，带宽直接与等待时间相关。是该了解如何通过一个叫做图像预载入（preloading）的技巧来提高 Web 站点的访问速度的时候了。
图像预载入
对于浏览器载入图像来说，只有在对图像发送一个 HTTP请求之后，它们才会被浏览器载入，对图像的 HTTP 请求要么使用 ＜img＞ 标记，要么通过方法调用实现。如果使用 JavaScript 脚本来处理在 mouseover 事件时交换图像，或者在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果。
一些浏览器采用一些措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。
Image() 对象
预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。假设我们有一个图像叫做heavyimagefile.jpg，在用户的鼠标放到一个已经显示的图像之上时，我们希望显示这个图像。为了预载入这一图像从而得到较快的响应时间，我们简单地创建一个 Image() 对象 heavyImage，然后在 onLoad() 事件处理器中将其同时载入。
function preloader() { heavyImage=new Image(); heavyImage.src="../images/bigGirl.jpg"; } document.onload=preloader;
<img src="../images/yanzi.jpg" name="img1" onmouseover="js:document.images.img1.src='../images/bigGirl.jpg'; /> </a>
或者this.src=' ';
使用数组载入多个图像
在实际应用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包含多个图像翻卷的菜单栏中，或者在我们试图创建平滑效果时，都需要预载入多个图像。其实这并不困难，只要使用 JavaScript 的数组即可实现，如下例所示：
function preloader() { var i=0; //counter; var imageObj=new Image(); var images=new Array(); for(i=0;i<5;i++) { images[i]=i+'jpg'; } for(i=0;i<5;i++) { imageObj.src=images[i]; } }
在上面的例子中，我们定义一个变量 i和一个 Image() 对象 imageObj。然后定义了一个新数组 images[]，每个数组元素存储要被预载入的图像。最后，创建一个 for() 循环来处理整个数组，并将每个元素赋给 Image() 对象，这样将其载入到缓存中。
function onloadFunc() { var objImage=new Image(); objImage.src="../images/bigGirl.jpg";//preload the image objImage.onload=function(){ window.location.href="http://www.baidu.com"; } }
<img src="../images/yanzi.jpg" name="img1" onmouseover="js:onloadFunc();" />
当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。
当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。
via:http://www.wzsky.net/html/Website/Javascript/39549.html
http://blog.donews.com/bigcarp/archive/2006/12/21/1100702.aspx
如何判断图片是否加载完成
一、一般情况下
1）图片静态页面标签<img />创建
<img src = 'http://www.baidu.com/img/baidu_sylogo1.gif' onload='onloadHandler(this)' />
2）图片通过脚本动态创建
1 var img = document.createElement('img'); 2 img.onload = function(){ 3 alert('img loaded, img.src = ' + this.src); 4 }; 5 img.onload = onloadHandler;
二、
假设页面原本有这么张静态图片，但没有通过行内脚本的绑定onloadHandler，如下代码所示：（有可能开发GG很痛恨行内脚本）
<img src="http://www.baidu.com/img/baidu_sylogo1.gif" id="pic" />
多很多很多的资源要加载 -->
<!-- 假设此处有很 <script> function $(id) { return document.getElementById(id);} function onloadHandler(){ alert('img loaded, img.src = ' + this.src); }; var img = $('pic'); img.onload = onloadHandler;baidu.com/img/baidu_sy
img.src = "http://www.logo1.gif"; </script>
会有什么问题呢？有可能这段脚本运行之前，图片的onload事件已经触发了，于是，onloadHandler永远也不会执行 >_<
如何解决？—— img.complete
img.complete：如果图片之前已经加载完成，则为true，否则为false
<script> function $(id) { return document.getElementById(id);} function onloadHandler(){ alert('img loaded, img.src = ' + this.src); }; var img = $('pic'); img.src = "http://www.baidu.com/img/baidu_sylogo1.gif"; if(img.complete){ onloadHandler.call(img); }else{ img.onload =onloadHandler; //注意这里跟上面的区别，img.src赋值 与 绑定 onload事件的顺序相反
} </script>
写在后面：以上代码未经各大浏览器/版本 严格摧残验证，以下问题尚待验证，求不小心踩进来的大大指教！
1）是否所有主流浏览器均支持 img.complete（包括不同版本）
2）有没有可能在第一个分支判断 if(img.complete) 结束后，但未运行到 img.onload 这块代码，img的onload事件已经触发，导致onloadHandler不会执行
下面这段代码中间插了个耗时无比的逻辑，延迟onload的绑定，结果：onload处理方法还是执行了
var img = document.createElement('img'); img.src = 'http://im-img.qq.com/inc/images/new_header2/logo.gif'; if(img.complete){ console.log('a'); onloadHandler.call(img); }else{ var t1 = new Date() - 0; var div = document.createElement('div'); for(var i=0; i<10000; i++){ div.innerHTML = div.innerHTML + i; } document.body.appendChild(div); var t2 = new Date() - 0; console.log(t2 - t1); //在chrome23.0里，6000++ms img.onload = onloadHandler; img.onload = onloadHandler; //神奇的事情：onload事件触发，而且处理方法被执行了 }
demo:http://jsfiddle.net/x2aW8/light/
----------------
avascript如何判断一张图片是否加载完成:
在实际应用中有时候需要判断图片是否加载完成，以便判断在完成前和完成后应该做哪些事情，下面就简单介绍一下如何实现此功能。代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <title>如何判断一个图片是否加载完成-蚂蚁部落</title> </head> <body> <img src="1.png" id="myimage" /> <script type="text/javascript"> var myimage=document.getElementById("myimage"); myimage.onload=function() { alert("图片加载完成"); } </script> </body> </html>
以上代码，当图片加载完成的时候会弹出一个提示框，实现了我们的需求。但是此种方法有个缺点，那就是不能够使用window.onload=function(){}，因为这个时候文档已经加载完成了，图片的onload事件自然就无效了。所以推荐使用动态方式。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="[url=http://www.softwhy.com/]http://www.softwhy.com/[/url]" /> <head> <title>如何判断一个图片是否加载完成-蚂蚁部落</title> <script type="text/javascript"> window.onload=function() { var mydiv=document.getElementById("mydiv"); var newImage=new Image() newImage.src='1.png' newImage.onload=function() { alert("图片加载完成"); mydiv.appendChild(newImage); } } </script> </head> <body> <div id="mydiv"></div> </body> </html>
以上代码同样可以在图片加载完成之后弹出一个对话框，并且将图片在div中显示.
JS快速获取图片宽高的方法
// 图片地址 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg'; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 判断是否有缓存 if(img.complete){ // 打印 alert('from:complete : '+img.width+',height:'+img.height); }else{ // 加载完成执行 img.onload = function(){ // 打印 alert('from:onload : '+img.width+',height:'+img.height); }; }
通过定时循环检测获取
看看以下例子，为了避免从缓存里读取数据，每一次请求都带时间戳：
// 记录当前时间戳 var start_time = new Date().getTime(); // 图片地址 var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 定时执行获取宽高 var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if(img.width>0 || img.height>0){ var diff = new Date().getTime() - start_time; document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : '+img.width+',height:'+img.height+', time:'+diff+'ms</div>'; clearInterval(set); } }; var set = setInterval(check,40); // 加载完成获取宽高 img.onload = function(){ var diff = new Date().getTime() - start_time; document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : '+img.width+',height:'+img.height+', time:'+diff+'ms</div>'; };