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();
}

 

 

posted @ 2008-10-15 21:52  LongWay  阅读(10195)  评论(5编辑  收藏  举报