摘要:
在页面加载时,使用$(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>
能成功获取到图片尺寸信息后,接下来的事情便简单多了。
五、小结
对于图片而言,当页面加载完成后再去获取图片的信息要比一上来就直接获取图片信息的方法好很多。虽然这次不是什么大问题,但还是值得重视一下下。