澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-09-11 06:10 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

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

那是博客园的三个相册,看到后想试着做做看。

怎样消除谷歌(Google)浏览器下jquery不能获取图片的尺寸,Googlejquery

代码如下:

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

  

  在自身的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;
          }
        }
      }
    }

  

如上内容是本身给大家享用的什么缓慢解决Google浏览器下jquery不能够获取图片的尺寸以及jQuery动态改换图片突显大小的主意,希望大家欣赏,更期望情侣请持续关切本站,谢谢。

代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代...

在自家的制作方法中,必要获得到每张照片的增加率,所以很当然就利用了jq的width()方法。在ff跟ie下运作难题十分的小,不过到了chrome上,就涌出难题了。

选取alert排查,发掘chrome下width方法取到的值都以0.那标准的话,想来就是脚本运行到那的时候图片根本没加载好。难题应有出在$(function(){});上,因为那个格局只供给加载完dom就开首运转。那么改成在onload下执行,果然那下能够了。然而那鲜明不是很好的艺术,终究在onload下运营要等到整个文件全部内容全体加载好后再运营脚本。

英特网检索一下后,开采那哥么//www.jb51.net/article/50402.htm也遇上了一样的主题材料,在其的褒贬下方有一种减轻方案,能够参照:

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:如何解决谷歌浏览器下jquery无法获取图片的尺寸

关键词: 澳门威利斯人