学步园

有些图片服务器收集了用户各种尺寸的图片，出于某些原因没有一个统一的尺寸处理。在加载到网页的时候，我们通常只想给它们一个最大的宽度，而不是写死。

1、传统的代码如下：

var ctn = document.getElementById('img');

var img = '<img src="..."/>';

ctn.innerHTML = img;

ctn.onload = function(){

　　if(this.width>400){

　　      this.width = 400;

     }

}

这样的代码会出现一些问题：

如果这个图片很大，会一直等到图片加载完以后才会对其进行缩小处理，会有一些闪动。

2、于是想到第二种：

var ctn = document.getElementById('img');

var imgO = new Image();

imgO.src = url;

imgO.onload = function(){

　　if(imgO.width>400){

　　　　this.width = 400;

　　}

　　ctn.appendChild(imgO);

}

这种写法避免了，加载完之后才处理造成的闪动，但是在ie下仍然有个bug，就是如果这个图片在缓存中存在，那么在src赋值的那一瞬间即完成了这个对象的加载，onload事件永远不会触发，在ie下如果有缓存就出现了图不见了的bug。

3、针对第二个bug，对代码进行了部分改进：

var ctn = document.getElementById('img');

var imgO = new Image();

imgO.src = url;

if(imgO.width>0){
if(imgO.width>400){

　　　　this.width = 400;

　　}
}else{
   imgO.onload = function(){

　　if(imgO.width>400){

　　　　this.width = 400;

　　}

　　ctn.appendChild(imgO);

  }
}

这样写以后，我们针对缓存中有图的情况作了处理，ie下的bug也解决了。我们可以安心的等图片加载完处理完以后，想怎么渲染就怎么渲染了。

4、根据网友反映，发现代码冗余了。在这里贴下网友@威老提供的代码：

@最真的梦
代码不优雅了。。。
@yanz
果然，最简单的方案，才是最好的方案。理解了问题的实质，才能提出最佳解决之道。
当你给img的src赋值的时候，图片就开始加载。从缓存读取时，图片马上就加载好了。把图片加载延后，代码简单，又能实际地解决问题。

var ctn = document.getElementById('img');
var imgO = new Image();
imgO.onload = function(){
　　if(imgO.width>400){
　　　　this.width = 400;
　　   //在这里也可设置高度
　　}
   //图片下载完毕了，高宽设好了，再添加到dom结构中去
　　ctn.appendChild(imgO);
}
imgO.src = url;