Random 尝试获取图像的 naturalHeight 和 naturalWidth 失败-解网

问：

我有一些简单的代码，我检查图像的宽度和高度，如果它不是 >= 120x90，它就会被放在上面。visibility: hidden

$(".video-thumbnail").each(function() {
    var width = $(this).prop("naturalWidth");
    var height = $(this).prop("naturalHeight");

    if (width <= 120 && height <= 90) {
        $(this).css("visibility", "hidden");
    }
});

问题是在某些页面重新加载时会随机失败（请参阅下面的编辑）。

我认为这可能是缓存或浏览器加载延迟问题。

编辑

要重现的已确认事件序列：

图像缓存在浏览器中
修改 HTML 源代码
导航到页面（不重新加载）

有什么建议可以更可靠地运行它吗？也许强制浏览器下载图像文件？不知道那会是什么样子。

JavaScript jQuery

$(".video-thumbnail").each(function () {
  this.decode().then(() => {
      var width = $(this).prop("naturalWidth");
      var height = $(this).prop("naturalHeight");

      if (width <= 120 && height <= 90) {
          $(this).css("visibility", "hidden");
      }
  }).catch((encodingError) => {
    // Do something with the error.
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://picsum.photos/121/91" class="video-thumbnail">
<img src="https://picsum.photos/121/91" class="video-thumbnail">
<img src="https://picsum.photos/119/89" class="video-thumbnail">
<img src="https://picsum.photos/121/91" class="video-thumbnail">

0赞 Jeff 9/27/2022 #2

发布一种替代方法，该方法也有效，并且标记为正确的方法供我将来参考：

$(window).on("load", function() {
    $(".video-thumbnail").each(function() {
        var width = $(this).prop("naturalWidth");
        var height = $(this).prop("naturalHeight");

        if (width <= 120 && height <= 90) {
            $(this).css("visibility", "hidden");
        }
    });
});

先打电话是唯一的改变。有时图像没有加载我的原始代码。$(window).on("load"...

来源：

好奇这与标记为正确的答案中的代码之间是否存在任何性能差异。行为似乎是相同的。

上一个：getComputedStyle 按预期返回，但 getComputedStyle.anyProperty 未返回

下一个：如何在不影响元素的：：before 或：：after 的情况下更改元素的字体系列？

Random 尝试获取图像的 naturalHeight 和 naturalWidth 失败

Random fails trying to get the naturalHeight and naturalWidth of an image

评论