用jquery不能得到图片的高度
2016-04-19 14:37
218 查看
摘要:
在页面加载时,使用$(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>
能成功获取到图片尺寸信息后,接下来的事情便简单多了。
五、小结
对于图片而言,当页面加载完成后再去获取图片的信息要比一上来就直接获取图片信息的方法好很多。虽然这次不是什么大问题,但还是值得重视一下下。
相关文章推荐
- jquery不能得到图片的高度
- java中得到图片的宽度 高度:
- 使用jquery获取网页中图片高度的两种方法
- 工具类 得到屏幕的宽度,高度,打开浏览器,判断控件是否在屏幕中,查看图片是否已经缓存
- 使用jquery获取网页中图片高度的两种方法
- .net 中如何得到图片的高度(height)和宽度(width) ,生成图片的缩略图
- 上传图片input-file表单元素值为C://fakepath,不能得到本地真实路径解决方法
- jquery获取图片原始尺寸 (高度与宽度)示例
- asp.net 中如何得到图片的高度(height)和宽度(width)以及生成图片的缩略图 C#
- jquery根据图片宽度同比例设置图片高度,图片自适应高度
- java中得到图片的宽度 高度:
- jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理
- JQuery 动态改变图片尺寸,不论宽度和高度单方面超出给定数值,IE6、IE7、IE8下正常
- 使用jquery获取网页中图片的高度——解惑
- asp.net 中如何得到图片的高度(height)和宽度(width)以及生成图片的缩略图 C#
- js和jquery获取图片真实的宽度和高度
- jquery动态插入图片 获取高度宽度
- jquery 得到当前页面高度和宽度的两个函数
- java中得到图片的宽度 高度:
- imgAreaSelect插件实现图片裁剪 用的Jquery不能超过1.9