请参见最新的《javascript 图片预加载》
=========================================
【头题】这又是一篇探讨文。即为我学习中总结，不是教程，不是技术样板，请你抱着怀疑的、挑错的态度来阅读此文。
我早在暑假初的时候写过一篇《我是如何处理文章中图片的》，其实那篇文章中的代码主要是为了限制图片的大小，因为IE对图片的按比例处理支持很不好。比如我对图片限制“max-width:600px”，火狐、chrome等浏览器会按比例缩小图片，而IE这方面较差，往往不是按比例缩小，会导致图片变形。而且IE6不支持max-width。
所以为了兼容性，才要去使用JS来处理。现在来看早期的这篇文章，发觉代码中存在很多不合理之处。所以我重写了获取图片大小的方法。
/*!
@FileOverview 获取图片尺寸
@Author liuqiqi || imqiqiboy@g ||
@date /11/29
@param cfg 配置项，cfg.img为一个图片对象的引用或者图片的url，cfg.oncomplete为获取尺寸后的后续操作，即回调函数。具体应用请看例子
@return none
*/
function getImageSize(cfg){
var img=document.createElement('img'),
callback=cfg.oncomplete;
img.src = typeof cfg.img == 'string'?cfg.img:cfg.img.src;
img.setAttribute('style','position:absolute;visibility:hidden;');
document.body.appendChild(img);
img.οnlοad=img.οnerrοr=img.onreadystatechange=function(){
if(img&&img.readyState&&img.readyState!='loaded'&&img.readyState!='complete')
return;
img.onload = img.onreadystatechange = img.onerror = null;
callback.call({"width":img.width,"height":img.height},null);
img.parentNode.removeChild(img);
img=null;
};
}
/* 例子1，获取远程图片的尺寸 */
getImageSize({
img:'/wp-content/uploads//11/bing.png',
oncomplete:function(){
alert('宽度：'+this.width+'，'+'高度：'+this.height)
}
});
/* 例子2，限制class为myimg的图片的大小为600以内 */
var imgs=getElementsByClassName('myimg','img',document),//getElementsByClassName为一个自写的结点获取方法，不是JS原生支持的哦
maxWidth=600;//最大宽度为600
for(var i=0;i<imgs.length;i++){
getImageSize({
img:imgs[i],
oncomplete:function(){
if(this.width>maxWidth){
imgs[i].height=Math.round(this.height/this.width*maxWidth);
imgs[i].width=maxWidth;
}
}
});
}
以上代码中也包含了两个具体应用的例子。函数参数cfg是个对象，其中oncomplete为尺寸获取之后的响应函数，图片的尺寸保存在响应函数的调用对象中，使用this.width、this.height就可以分别取到图片的宽度和高度。
注：如果你想要限制图片尺寸，请参考最新的文章《终极完美版javascript获取并限制调整图片尺寸》
source://11/30/get-the-size-of-a-remote-image.html
如果觉得《javascript 图片预加载》对你有帮助，请点赞、收藏，并留下你的观点哦！
