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

Question

我有一个高分辨率图像，我正在加载到一个页面中。默认情况下，它们都设置为小渲染（在这种情况下，最大宽度为 500 像素），但如果图像宽于高度，我希望将其渲染得更大，最大宽度为 900 像素。我想用一个脚本（我正在使用 jQuery）来做到这一点，因为我事先不知道图像尺寸是多少，也不能硬编码它们的最大宽度。我使用的是最大宽度而不是宽度，因为我不想过度拉伸小于 900 像素的图像。

在执行此操作时，我想在加载图像之前设置图像大小（因此它不会以原始大小闪烁然后变为新大小，在此过程中移动页面中的所有元素），但是在创建 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

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

Answer 2

将 max-with 更改为宽度

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