jquery加载图片时获取宽高为0的原因及解决方案

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2015-12-24 23:23:48　-　阅:　-　评:0　-　积分:0

摘要：
　　在页面加载时，使用$(function(){})并不能完全获取到图片的宽高信息，很多时候输出的值均为0，所以我们要换成当页面加载完成后再来获取图片的尺寸信息......

市场部要搞线下地推活动，艺灵这边就要做一个手机端活动页面。然后掉进一个小坑中......

一、市场部需求

市场部地推手机端活动页面长这个样子：窝窝宝线下地推活动手机页面
要求：下方的“窗帘”、“抱枕”、“罗马杆”、“窗轨”、“毛巾”是5个链接，点击后跳转指定的活动页面中，吧啦吧啦......

二、手机页面思路

由于手机尺寸不同，这里不能像pc端那样直接定义成：640px*1143px，只能以%来定义。这个并不是重点，重点是下面的5个链接。如果是直接写死宽度及方位值，在小屏手机上势必会错位！

思考了一小会儿后，艺灵决定以缩放比来控制宽高及方位值。

以原尺寸640*1143为基准，图片最大宽度为640px，最大高度为1143px。
缩放比公式：宽(高)度=当前屏幕宽(高)度/图片宽(高)度*链接区块宽(高)度;left(top)值=当前屏幕宽(高)度/图片宽(高)度*链接区块的left(top)值;

有了思路后，接下来开始码代码了，坑开始了。

三、jquery效果源码

我们先来获取图片的尺寸信息吧。

1.html源码

<!DOCTYPE html>
<html>
　<head>
　　<meta charset="utf-8">
　　<title>手机端获取图片尺寸信息demo</title>
　　<meta name="author" content="艺灵设计,www.yilingsj.com"/>
　　<meta name="Keywords" content="jquery特效教程,DOM加载,jquery.load(),获取图片尺寸,jquery获取宽高度,手机页面适配,console.log调试" />
　　<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
　</head>
　<body>
　　<p class="msg"></p>
　　<img src="http://www.yilingsj.com/d/file/jquery/2015-12-24/窝窝宝线下地推活动手机页面.jpg" class="img "/>
　　<script type="text/javascript">
　　　$(function(){
　　　　var $img=$('.img');
　　　　var $img_w=$img.width();
　　　　var $img_h=$img.height();
　　　　$('.msg').text('图片宽度：'+$img_w+'   ,图片宽度：'+$img_h);
　　　})
　　</script>
　</body>
</html>

上面代码输出的结果是：图片宽度：0 ,图片宽度：0，配图：

我去，不科学呀！明明图片是有宽高的呀！怎么会显示图片宽高都为0呢？......

不敢相信眼前这一切的你不甘心，于是开启了调试模式，将刚才的代码再次粘贴。结果亮瞎了双眼！配图：

卧槽！这是什么鬼？！怎么又能正常获取值了！？？？

四、DOM加载在搞鬼

思考了良久后，艺灵忽然想到了DOM加载问题，然后果断将：$(function(){})替换成：$(window).load(function(){})，此时再刷新页面可看到页面上已经能正常获取图片尺寸信息了。配图：

2.修改后的源码

<!DOCTYPE html>
<html>
　<head>
　　<meta charset="utf-8">
　　<title>手机端获取图片尺寸信息demo</title>
　　<meta name="author" content="艺灵设计,www.yilingsj.com"/>
　　<meta name="Keywords" content="jquery特效教程,DOM加载,jquery.load(),获取图片尺寸,jquery获取宽高度,手机页面适配,console.log调试" />
　　<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
　</head>
　<body>
　　<p class="msg"></p>
　　<img src="http://www.yilingsj.com/d/file/jquery/2015-12-24/窝窝宝线下地推活动手机页面.jpg" class="img "/>
　　<script type="text/javascript">
　　　$(window).load(function(){
　　　　var $img=$('.img');
　　　　var $img_w=$img.width();
　　　　var $img_h=$img.height();
　　　　$('.msg').text('图片宽度：'+$img_w+'   ,图片宽度：'+$img_h);
　　　})
　　</script>
　</body>
</html>

能成功获取到图片尺寸信息后，接下来的事情便简单多了。

五、小结

对于图片而言，当页面加载完成后再去获取图片的信息要比一上来就直接获取图片信息的方法好很多。虽然这次不是什么大问题，但还是值得重视一下下。

六、在线演示

至于上面这个案例中的源码，艺灵已经打包好了，需要研究的看官可以下载下来研究。

资源下载

demo演示jquery加载图片时获取宽高为0的原因及解决方案.zip

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-12-24/350.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！