javascript获取动态加载图片的宽度和高度?

一个是把图片 html()到HTML里面在获取

一个是用过URL ajax获取

只要图片加载完毕时才能获取到加载的图片的宽度和高度,你的意思是再图片加载前显示加载等待图片,然后再显示加载后的图片吧?

只要判断图片是否加载完毕,然后再获取图片属性,下面是个例子,不知道对你有没有帮助:

/** 动态获取图片的宽度和高度的像素值

*

* @param sUrl 图片的url

* @param fCallback 回调函数,fCallback至少有一个类型为object类型的参数用来接收图片的宽、高、url

*

* usage:

* var url = "http://mat1.gtimg.com/datalib_img//11-05-26/c/c21ff1138e7349859b49b99312d05baf.jpg";

* FGetImg(url, function(img){alert('width:'+img.width+";height:"+img.height+";url:"+img.url);});

*

*/

var FGetImg = function(sUrl, fCallback)

{

var img = new Image();

img.src = sUrl + '?t=' + Math.random(); //IE下,ajax会缓存,导致onreadystatechange函数没有被触发,所以需要加一个随机数

if (FBrowser.isIE)

{

img.onreadystatechange = function()

{

if (this.readyState=="loaded" || this.readyState=="complete")

{

fCallback({width:img.width, height:img.height, url:sUrl});

}

};

}else if (FBrowser.isFirefox || FBrowser.isSafari || FBrowser.isOpera || FBrowser.isChrome)

{

img.onload = function()

{

fCallback({width:img.width, height:img.height, url:sUrl});

};

}

else

{

fCallback({width:img.width, height:img.height, url:sUrl});

}

};

  1. <script language="javascript" type="text/javascript">
  2. $(function(){
  3. var im =newImage();
  4. im.src = $('#test').attr('loadsrc');
  5. $(im).load(function(){
  6. $('#test').attr('src',$('#test').attr('loadsrc'));
  7. alert(im.width); //关键是这一句
  8. })
  9. });
  10. </script>