Question

我正在加载到页面中的高分辨率图像。它们都设置为默认渲染小（在这种情况下最大宽度为500px），但如果图像比它高，我想要渲染它更大，最大宽度为900px。我想用脚本（我使用的是jQuery）来做这件事，因为我事先不知道图像大小是什么，也不能用它们的最大宽度进行硬编码。我使用max-width而不是width，因为我不想过度拉伸小于900px的图像。

在执行此操作时，我想在图像加载之前设置图像大小（因此它不会以原始大小闪烁然后再刷新到新大小，在此过程中移动页面中的所有元素），但是在创建DOM之后（所以我可以访问他们的naturalHeight和naturalWidth）。

这就是我的尝试：

<style>
img.portfolio {
  max-width: 500px;
}
</style>

<script>
$(document).ready(function(){
    $("img.portfolio").each(function(){ 
        if ($(this)[0].naturalHeight < $(this)[0].naturalWidth) {
          var ratio = $(this)[0].naturalHeight / $(this)[0].naturalWidth;
          $(this).css("max-width", 900);
          $(this).css("max-height", 900*ratio);
          $(this).width($(this)[0].naturalwidth);
          $(this).width($(this)[0].naturalheight);
        }
    });

});
</script>

但我发现这只会有效！它似乎一直在Chrome中运行，但我注意到我第一次在Firefox中加载页面时它不起作用，所有图像的宽度都是500px，但后续页面重新加载它会起作用。我在Firefox中加载了关闭缓存的页面，但它无效。为什么会这样？我如何解决它？为什么这是Firefox中的问题而不是Chrome？

编辑更多的谜团：我为这个问题做了一个fiddle，我实际上无法重现Firefox中的小提琴中的错误。什么！所以我在tumblr上做了一个例子，这就是我想要使用这个脚本的原因。它是here，当我关闭浏览器缓存时，它随机有时会起作用，并且在Firefox和Chrome中都不起作用。发生了什么？我怀疑这与tumblr如何呈现其模板有关;我该如何规避这种不规则？

Answer 1

将max-with更改为宽度

  $(this).css("maxWidth", 900);
  $(this).css("maxHeight", 900*ratio);

Answer 2

你可以简单地插入隐藏的图像（显示：无），在隐藏时调整它的大小，然后使其可见。

在加载之前但在DOM之后调整图像大小

2 个答案: