9159金沙游艺场-奥门金沙游艺场-[欢迎您]

9159金沙游艺场为您呈现最新的面貌!,目前注册送体验金,欢迎您将成为影视娱乐行业新的风向标,是亚洲的优质娱乐先锋。

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

日期:2020-01-04编辑作者:前端

什么化解Google浏览器下jquery不可能获取图片的尺寸,谷歌(Google卡塔尔(قطر‎jquery

代码如下:

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

如上代码在IE和火狐中绝非难点,然则在Google中恐怕会冒出难点,之所以没货的尺寸便是因为图片并未有加载成功。

改善章程如下:

$(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);  // 设定等比例缩放后的高度
   }
 });
 });

9159金沙游艺场,  在本人的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;
          }
        }
      }
    }

如上内容是我给大家分享的怎么样解决谷歌(GoogleState of Qatar浏览器下jquery不能够获取图片的尺寸以至jQuery动态校正图片展示大小的格局,希望我们欢欣,更期待爱人请持续关怀本站,多谢。

代码如下: $(documentState of Qatar.ready(function(卡塔尔(قطر‎{ var img_h=$img.height(); var img_w=$img.width(); }) 以上代...

本文由9159金沙游艺场-奥门金沙游艺场-[欢迎您]发布于前端,转载请注明出处:如何解决谷歌浏览器下jquery无法获取图片的尺寸

关键词:

CentOS添加EPEL

CentOS添加EPEL centos上安装hadoop遇到困难,自己下载安装总是出错,找到以下解决方式:epel 0.安装yum优先级插件 yum in...

详细>>

cocos2dx骨骼动画Armature源码剖析9159金沙游艺场

cocos2dx骨骼动画Armature源码剖析(三),cocos2dxarmature cocos2dx里骨骼动画代码在cocos - editor-support -cocostudio文件夹中,win下通...

详细>>

js初步理解

谈谈impress.js起头精晓,impress.js通晓 1、对impress.js认识 impress.js 接受 CSS3 与 JavaScript语言产生的一个可供开采者使用的...

详细>>

转盘抽奖代码分享【9159金沙游艺场】

手机端转盘抽奖代码分享,转盘抽奖代码分享 演示效果如下: 9159金沙游艺场,不废话了,直接给大家贴代码了。 ...

详细>>