如下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 );
}
}
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();
}
function onImageLoad(image){
document.body.appendChild(image.image);
alert( " image loaded and the size is " + image.width + " * " + image.height);
}
function Button1_onclick() {
img.load();
}