Question

我有一个网站使用javascript将图片调整为最大宽度/高度。我使用javascript而不是CSS来执行此操作，因此它向后兼容旧版浏览器。我的问题是在Chrome中似乎不会一直调整图像大小。有时在第一次访问页面时，图像不会调整大小，在重新加载和后续访问时会调整大小。

http://justinzaun.com/Tree/people/@I116@.php用于示例页面，但网站上的任何人页面都可能显示相同的问题。我正在尝试在$（window）.load（）和$（documnet）.ready（）中调整大小，这发生在familytree.js文件中。

用户名/密码为admin / pwd

Answer 1

这可能是WebKit bug 45586，您的代码不知道图片的大小。通常，beforeload处理程序正在通过Adblock或Adblock Plus等扩展程序进行注册。

Answer 2

您拨打此代码：

$(this).find("img").load(function() { resize($(this)); });

如果图片已经加载，则无效。

请改用：

var $img = $(this).find("img");
$img.load(function() { resize($(this)); });
// If image is already loaded then it will have a height
if($img.height())
    resize($img);

这将在加载时调用resize，但如果图像已经加载，它将调用resize。

Answer 3

在window.onload触发后，您正在侦听图像加载事件，这意味着应该已经加载了所有图像。尝试类似：

$(function() {
  // on DOM ready
  $('img').each(function() {
    var $img = $(this);
    (this.width && this.height) ? resize($img) : $img.load(function() {
      // timeout to prevent webkit bug 45586
      window.setTimeout((function($img) {
        return function() {
          resize($img);
        };
      }($img)),2);
    });
  });
});

Javascript在预期时不会触发

3 个答案: