如何解决谷歌浏览器下jquery无法获取图片的尺寸


Posted in Javascript onSeptember 10, 2015

代码如下:

$(document).ready(function(){ 
 var img_h=$img.height();  
 var img_w=$img.width();  
})

以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因为图片没有加载完成。

修改方法如下:

$(document).ready(function(){ 
 $img.load(function(){  
  var img_h=$img.height();  
  var img_w=$img.width();  
 }) 
})

还有点时间,接下来在给大家分享jQuery动态改变图片显示大小的方法,具体内容如下。

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等。

原始代码:

$(document).ready(function() {
   $('.post img').each(function() {
   var maxWidth = 100; // 图片最大宽度
   var maxHeight = 100;  // 图片最大高度
   var ratio = 0; // 缩放比例
   var width = $(this).width();  // 图片实际宽度
   var height = $(this).height(); // 图片实际高度
   // 检查图片是否超宽
   if(width > maxWidth){
     ratio = maxWidth / width;  // 计算缩放比例
     $(this).css("width", maxWidth); // 设定实际显示宽度
     height = height * ratio;  // 计算等比例缩放后的高度 
     $(this).css("height", height); // 设定等比例缩放后的高度
   }
   // 检查图片是否超高
   if(height > maxHeight){
     ratio = maxHeight / height; // 计算缩放比例
     $(this).css("height", maxHeight);  // 设定实际显示高度
     width = width * ratio;  // 计算等比例缩放后的高度
     $(this).css("width", width * ratio);  // 设定等比例缩放后的高度
   }
 });
 });

在我的js代码中,也采取了这种写法。然而在不同的浏览器测试效果时,发现此种写法不能适应chrome浏览器(chrome版本号为10.0.648.204),会产生图片以原有尺寸显示出来的bug。后来把$('.post img').each()的代码用$(window).load()方法包装起来,就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug,并且$(document).ready和$(window).load有什么区别呢?

原来document ready事件是在HTML文档载入即DOM准备好就开始执行了,即使图片资源还没有加载进来。而window load事件执行的稍晚一些,它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时,图片载入与动态改变图片的js代码执行顺序不确定。

----------------------------------------------------

上面是文章的全部类容,关于上面的代码,放到我的页面中时获取图片高度时会报错,提示没有提供width方法

var width = $(this).width();  // 图片实际宽度
var height = $(this).height(); // 图片实际高度

故修改代码如下:

jQuery(window).load(function () {
      jQuery("div.product_info img").each(function () {
        DrawImage(this, 680, 1000);
      });
    });
    function DrawImage(ImgD, FitWidth, FitHeight) {
      var image = new Image();
      image.src = ImgD.src;
      if (image.width > 0 && image.height > 0) {
        if (image.width / image.height >= FitWidth / FitHeight) {
          if (image.width > FitWidth) {
            ImgD.width = FitWidth;
            ImgD.height = (image.height * FitWidth) / image.width;
          } else {
            ImgD.width = image.width;
            ImgD.height = image.height;
          }
        } else {
          if (image.height > FitHeight) {
            ImgD.height = FitHeight;
            ImgD.width = (image.width * FitHeight) / image.height;
          } else {
            ImgD.width = image.width;
            ImgD.height = image.height;
          }
        }
      }
    }

以上内容是本人给大家分享的如何解决谷歌浏览器下jquery无法获取图片的尺寸以及jQuery动态改变图片显示大小的方法,希望大家喜欢,更希望朋友请持续关注本站,谢谢。

Javascript 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
js实现的动画导航菜单效果代码
Sep 10 #Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 #Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 #Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 #Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 #Javascript
JS实现自动变换的菜单效果代码
Sep 09 #Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 #Javascript
You might like
PHP 调试工具Debug Tools
2011/04/30 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
超简单的Python HTTP服务
2019/07/22 Python
详解python中的模块及包导入
2019/08/30 Python
python实现图像外边界跟踪操作
2020/07/13 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
工艺员岗位职责
2014/02/11 职场文书
一分钟演讲稿
2014/04/30 职场文书
学校课外活动总结
2014/05/08 职场文书
电钳工人个人求职信
2014/05/10 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
数学教师个人总结
2015/02/06 职场文书
安全生产先进个人总结
2015/02/15 职场文书
采购部年度工作总结
2015/08/13 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers