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

Question

I have some simple code where I check an image's width and height, and if it's not >= 120x90, it gets a visibility: hidden put on it.

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

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

The problem is this randomly fails on some page reloads (see edit below).

I think it may be a caching or browser loading delay issue.

EDIT

Confirmed sequence of events to reproduce:

Images are cached in browser
Modify HTML source
Navigate to page (not reload)

Any suggestions to run this more reliably? Maybe force the browser to download the image file? Not sure what that would look like.

score 1 · Accepted Answer · answered Sep 26 '22 at 23:11

A more reliable solution would be to use the HTMLImageElement.decode() that returns a promise which is resolved once the full-resolution image is ready for use, an example of this is below:

$(".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">

Jeff · Answer 2 · 2022-09-27T12:54:16.023

Posting an alternative method that also works as well as the one marked correct for my future reference:

$(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");
        }
    });
});

Calling $(window).on("load"... first is the only change. Sometimes images were not loaded with my original code.

Sources:

Curious if there are any performance differences between this and the code in the answer marked correct. Behaviors seem to be identical.

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

2 Answers2