javascript 图片预加载

请参见最新的《javascript 图片预加载 》

=========================================

【头题】这又是一篇探讨文。即为我学习中总结，不是教程，不是技术样板，请你抱着怀疑的、挑错的态度来阅读此文。

我早在暑假初的时候写过一篇《我是如何处理文章中图片的》，其实那篇文章中的代码主要是为了限制图片的大小，因为IE对图片的按比例处理支持很不好。比如我对图片限制“max-width:600px”，火狐、chrome等浏览器会按比例缩小图片，而IE这方面较差，往往不是按比例缩小，会导致图片变形。而且IE6不支持max-width。

所以为了兼容性，才要去使用JS来处理。现在来看早期的这篇文章，发觉代码中存在很多不合理之处。所以我重写了获取图片大小的方法。

/*!

 @FileOverview 获取图片尺寸

 @Author liuqiqi || imqiqiboy@g mail.com || http://www.qiqiboy.com

 @date 2010/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:'http://www.qiqiboy.com/wp-content/uploads/2010/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:http://www.qiqiboy.com/2010/11/30/get-the-size-of-a-remote-image.html