www.qjdy.com-奇迹赌场 > www.qjdy.com > 以上代码在IE和火狐中没有问题

原标题:以上代码在IE和火狐中没有问题

浏览次数:80 时间:2019-07-16

代码如下:

$(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动态更换图片突显大小的主意,希望大家欢愉,更希望爱人请持续关切本站,多谢。

你恐怕感兴趣的稿子:

  • 利用jQuery不决断浏览器中度消除iframe自适应中度难点
  • jQuery手提式有线电电话机浏览器中拖拽动作的劳苦性深入分析
  • firefox浏览器用jquery.uploadify插件上传时报HTTP 302破绽百出
  • jQuery插件Zclip完结完美包容个浏览器点击复制内容到剪贴板

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:以上代码在IE和火狐中没有问题

关键词:

上一篇:这是一个很简洁的CSS JavaScript二级菜单

下一篇:没有了