如何解决谷歌浏览器下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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
比较node.js和Deno
Apr 27 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
生成缩略图
2006/10/09 PHP
关于php循环跳出的问题
2013/07/01 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
Python实现截屏的函数
2015/07/26 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Django models filter筛选条件详解
2020/03/16 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
Python用SSH连接到网络设备
2021/02/18 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
职称自我鉴定
2013/10/15 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
小时代观后感
2015/06/10 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书