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

Question

我有一张正在加载到页面中的高分辨率图像。默认情况下，它们都设置为渲染较小(在本例中最大宽度为 500 像素)，但如果图像宽度大于高度，我想将其渲染得更大，最大宽度为 900 像素。我想用一个脚本(我正在使用 jQuery)来做到这一点，因为我事先不知道图像的大小，也不能在它们的最大宽度中进行硬编码。我使用最大宽度而不是宽度，因为我不想过度拉伸(stretch)小于 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 中重现 fiddle 中的错误。什么!所以我在 tumblr 上做了一个例子，这就是我试图让这个脚本工作的原因。是here ，并且当我关闭浏览器缓存时，它有时会在 Firefox 和 Chrome 中随机工作并且不工作。发生了什么？我怀疑这与 tumblr 呈现其模板的方式有关；我该如何规避这种违规行为？

Answer 1

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