首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

js/jquery快速获得图片真实的宽度和高度

冷蝶 2015-4-19 [jQuery] 来自PC 复制链接
611253
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
CSS帮助设计师设置一个元素的最大宽度max-width和最大高度max-height,防止布局错位,我总是把img, iframe, 和 embed 标签设置成 max-width: 100% 这样在小屏幕的设备上依然可以浏览,不过我还是希望能够获取到图像没有被拉伸和缩小的原始尺寸。要得到图片的真实的宽度和高度我们需要通过js来获得了,下面整理了js/jquery快速获得图片真实的宽度和高度代码,有需要的进入参考。

The JavaScript
使用一些JavaScript的监听函数,我们可以得到的图像的实际尺寸:
  1. myImage.addEventListener('onload', function() {
  2.     console.log('My width is: ', this.naturalWidth);
  3.     console.log('My height is: ', this.naturalHeight);
  4. });
复制代码

我从来都没有听说过naturalWidth 和 naturalHeight不过获取到的值确实正确的,不过总是应该在网页加载完毕以后在获取图片的宽度,不然永远获取到的都是0。

网上发现一个定时检测图片宽高的方法,效率非常高。具体代码如下:
/
  1. / 记录当前时间戳
  2. var start_time = new Date().getTime();

  3. // 图片地址
  4. var img_url = 'img/bdlogo.png?'+start_time;

  5. // 创建对象
  6. var img = new Image();

  7. // 改变图片的src
  8. img.src = img_url;

  9. // 定时执行获取宽高
  10. var check = function(){
  11.     // 只要任何一方大于0
  12.     // 表示已经服务器已经返回宽高
  13.     if(img.width>0 || img.height>0){
  14.         var diff = new Date().getTime() - start_time;
  15.         document.body.innerHTML += '
  16. from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms
  17. ';
  18.         clearInterval(set);
  19.     }
  20. };

  21. var set = setInterval(check,40);
复制代码


jquery方式代码如下
  1. var _w = parseInt($(window).width());//获取浏览器的宽度
  2. $(".new_mess_c img").each(function(i){
  3. var img = $(this);
  4. var realWidth;//真实的宽度
  5. var realHeight;//真实的高度
  6. //这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
  7. $("<img/>").attr("src", $(img).attr("src")).load(function() {
  8. /*
  9. 如果要获取图片的真实的宽度和高度有三点必须注意
  10. 1、需要创建一个image对象:如这里的$("<img/>")
  11. 2、指定图片的src路径
  12. 3、一定要在图片加载完成后执行如.load()函数里执行
  13. */
  14. realWidth = this.width;
  15. realHeight = this.height;
  16. //如果真实的宽度大于浏览器的宽度就按照100%显示
  17. if(realWidth>=_w){
  18. $(img).css("width","100%").css("height","auto");
  19. }
  20. else{//如果小于浏览器的宽度按照原尺寸显示
  21. $(img).css("width",realWidth+'px').css("height",realHeight+'px');
  22. }
  23. });
  24. });
复制代码



上一篇:jquery中checkbox反复没反应问题解决办法
下一篇:欢迎来站帮网投稿,一起分享经验、心得和方法
胜利 发表于 2015-4-19 10:24:47 来自PC
学习,周日愉快!
真 理 总 是 掌 握 在 少 数 人 手 中
zhmn168 发表于 2015-4-19 22:19:31 来自PC
审核元素应该有个nature把,那个貌似就是原尺寸。。。还有,图片保存到本地看不行么
逐梦互联:www.zhmn168.com提供虚拟主机、建站服务。
洛阳app开发 发表于 2015-4-21 14:10:15 来自PC
支持学习
洛阳app代写 发表于 2015-4-21 14:32:02 来自PC
支持学习
洛阳app技术 发表于 2015-4-22 11:17:55 来自PC
支持学习
lvguiqun 发表于 2015-4-22 13:42:53 来自PC
不过总是应该在网页加载完毕以后在获取图片的宽度
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表