JS动态加载图片

      如下js可以载入一个还没有在页面中的图片，并且可以获得其高度和宽度：

function  EnhancedImage(src,onLoaded){
     var  self  =   this ;
     this .src  =  src;
     this .width  =   0 ;
     this .height  =   0 ;
     this .onLoaded  =  onLoaded;
     this .loaded  =   false ;
     this .image  =   null ;
    
     this .load  =   function (){
         if ( this .loaded)
             return ;
         this .image  =   new  Image();
         this .image.src  =   this .src;
         function  loadImage(){
             if (self.width  !=   0   &&  self.height  !=   0 ){
                clearInterval(interval);
                self.loaded  =   true ;
                self.onLoaded(self); // 将实例传入回调函数
            }
            self.width  =  self.image.width; // 是number类型
            self.height  =  self.image.height;
        }
         var  interval  =  setInterval(loadImage, 100 );
    }
}

      总的原理就是new一个Image对象，设置了src属性过后，不断的检查需要载入的图片的宽和高，如果载入图片成功的话，宽和高都是不为0的数值，这个时候停止Interval ，并且执行onLoaded。

      这段js代码的使用方法：

var  img  =   new  EnhancedImage( " http://www.google.cn/intl/zh-CN/images/logo_cn.gif " ,onImageLoad);
function  onImageLoad(image){
    document.body.appendChild(image.image);
    alert( " image loaded and the size is  "   +  image.width  +   " * "   +  image.height);
}

function  Button1_onclick() {
    img.load();
}

 

 

转载于:https://www.cnblogs.com/LongWay/archive/2008/10/15/1311293.html