JavaScript-javascript获取动态加载图片的宽度和高度?
html:
<img src="loading.gif" loadsrc='xxx.jpg' id='test'/>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
html:
<img src="loading.gif" loadsrc='xxx.jpg' id='test'/>
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(2)
只要图片加载完毕时才能获取到加载的图片的宽度和高度,你的意思是再图片加载前显示加载等待图片,然后再显示加载后的图片吧?
只要判断图片是否加载完毕,然后再获取图片属性,下面是个例子,不知道对你有没有帮助:
/** 动态获取图片的宽度和高度的像素值
*
* @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});
}
};
不要获取ID为test的标签,这样是不准确的,你在图片下载完成时,直接获取你新创建的im标签的width属性就可以了,你拿我的给你改过的代码运行一下,我这是能获取得到的
<script language="javascript" type="text/javascript">
$(function(){
var im = new Image();
im.src = $('#test').attr('loadsrc');
$(im).load(function(){
$('#test').attr('src',$('#test').attr('loadsrc'));
alert(im.width); //关键是这一句
})
});
</script>