使用JQuery在Chrome中调整图像大小

今天我刚碰到最奇怪的错误。我不确定这是Chrome中的一个错误，还是我可以解决的问题，但是在这里。使用JQuery在Chrome中调整图像大小

我建了一个jQuery函数来调整一组图片被张贴在一个论坛：

$(".post-message img.post-image").load(function(){ 
    $(this).each(function() { 
     var maxWidth = 200;  
     if($(this).width() > maxWidth) 
     { 
      var factor = $(this).width()/maxWidth; 
      var width = $(this).width(); 
      var height = $(this).height(); 
      $(this).css('width', width/factor); 
      $(this).css('height', height/factor); 
     }  
    }); 
});

的问题是，这似乎只当我刷新页面的工作。当您按下上一页或链接到页面时，它不起作用。

铬中$(img).width()属性在函数不起作用的情况下返回0。如预期在IE9和FF3

这个函数执行

我能做些什么来解决这个奇怪的行为？

来源

2011-04-27 Berry Ligtermoet

我假设这是全部在document.ready或类似的东西？ – Neal 2011-04-27 16:01:06

不，它不是。我从堆栈中得到了另外一个答案，它建议在$（img）.load（）上执行代码。问题实际上是，在两种情况下它都不起作用，$（this）.width（）'返回0.让我把这个添加到问题中。 – 2011-04-27 16:02:58

尝试在其中包装一个document.ready或其他东西，看看它是否工作。 Chrome可能会在加载图像之前执行脚本，使其宽度为0. – Zirak 2011-04-27 16:05:14

感谢捐款人。以前的答案给出了堆栈 - 我显然无法在今天下午找到jQuery && Google Chrome - 解决了我的问题！

$(window).load(function() { 
    $(".post-message img.post-image").one("load", function(){ 
     $(this).each(function() { 
      var maxWidth = 200;  
      if($(this).width() > maxWidth) 
      { 
       var factor = $(this).width()/maxWidth; 
       var width = $(this).width(); 
       var height = $(this).height(); 
       $(this).css('width', width/factor); 
       $(this).css('height', height/factor); 
      } 
      console.log($(this).width())  
     }); 
    }).each(function() { 
     if(this.complete) $(this).trigger("load"); 
    }); 
});

的代码必须被上$(window).load()一起通过karim79所提供的代码执行。

来源

2011-04-27 16:30:21

很可能是因为图像正从浏览器缓存中拉出，并且load事件未触发。解决这个问题的方法是手动触发load如果图像的complete属性已设置：

$(".post-message img.post-image").one("load", function(){ 
    $(this).each(function() { 
     var maxWidth = 200;  
     if($(this).width() > maxWidth) 
     { 
      var factor = $(this).width()/maxWidth; 
      var width = $(this).width(); 
      var height = $(this).height(); 
      $(this).css('width', width/factor); 
      $(this).css('height', height/factor); 
     }  
    }); 
}).each(function() { 
    if(this.complete) $(this).trigger("load"); 
});

来源

2011-04-27 16:05:04 karim79

我仍然遇到同样的问题。快速调试显示函数在返回页面后触发函数时不知道图像的宽度。还要强调触发的加载事件，并执行'$（this）.each（）'中的回调。 – 2011-04-27 16:22:44

Karmin在这里是正确的。几年前我遇到了这个问题，最后只是不依赖于img.load。他的手动触发加载事件的解决方法应该可行。

但是......

开发商应该做的最大宽度或高度在CSS中的这个场景。实际上，在JavaScript中执行它们之前，先做好CSS中的编程实践。

此外，如果一个人以保持与该溶液去，var width和var height应放在旁边var maxWidth if语句的外部，并且用于任何$(this).width()被调用（包括在第4行的初始检查）。现在代码不必要地创建一个新的jQuery对象来获取每次应该存储并使用第一次检查的值时的高度。

来源

2011-04-27 16:36:12

我明白了，让我检查一下是否可以插入这种优化。同时检查我的答案，最终这对我是有用的。 – 2011-04-27 16:48:36

使用JQuery在Chrome中调整图像大小

回答

相关问题