Determine the width of invisible images using JavaScript/jQuery

Question

Determine the width of invisible images using JavaScript/jQuery

Please take a look at the jsFiddle

Every time I run it, I am trying to retrieve the width of the images, but the values I get are as follows (check in the JS console)

Some values are zero, and I can't figure out why. It seems random; different results each time. Even after refreshing the fiddle multiple times (F5), the width values vary. Sometimes accurate, sometimes just 0.

Even when I try running it locally (with images saved on my hard drive), the issue persists.

If anyone has any suggestions or insights into what might be causing this problem, please share!

javascript jquery html css jquery-plugins

Answer 1

Answer №1

The reason you are receiving a value of 0 periodically is because you are measuring the images before they have finished loading. When you attempt to measure an image that has not completed loading, it will return a width of 0.

To ensure that you get non-zero widths, you need to modify your code to check if the image has finished loading and wait for it if it hasn't:

if (this.complete) {
    console.log($(this).width() + " (didn't have to wait)");
} else {
    $(this).one("load", function() {
        console.log($(this).width() + " (had to wait)");
    });
}

For updated results, please refer to this Updated Fiddle.

Upon testing with a cleared browser cache in the embedded version of the fiddle, here is a sample of the output obtained:

var img = $(this);
img.one("load.showcase", function() {
    console.log(img.width() + " (had to wait)");
});
if (this.complete) {
    img.off("load.showcase");
    console.log(img.width() + " (didn't have to wait)");
}

Refer to this Fiddle for the updated version.

As explained, it is essential to hook the event first and then remove it immediately after to avoid missing notifications due to the multi-threaded nature of web browsers.

Answer 2

The reason you are receiving a value of 0 periodically is because you are measuring the images before they have finished loading. When you attempt to measure an image that has not completed loading, it will return a width of 0.

To ensure that you get non-zero widths, you need to modify your code to check if the image has finished loading and wait for it if it hasn't:

if (this.complete) {
    console.log($(this).width() + " (didn't have to wait)");
} else {
    $(this).one("load", function() {
        console.log($(this).width() + " (had to wait)");
    });
}

For updated results, please refer to this Updated Fiddle.

Upon testing with a cleared browser cache in the embedded version of the fiddle, here is a sample of the output obtained:

var img = $(this);
img.one("load.showcase", function() {
    console.log(img.width() + " (had to wait)");
});
if (this.complete) {
    img.off("load.showcase");
    console.log(img.width() + " (didn't have to wait)");
}

Refer to this Fiddle for the updated version.

As explained, it is essential to hook the event first and then remove it immediately after to avoid missing notifications due to the multi-threaded nature of web browsers.

Determine the width of invisible images using JavaScript/jQuery

Answer №1

Similar questions

Having trouble with Javascript's JSON.stringify or PHP's json_decode?

What is the best way to position the underline to appear beneath the second line in mobile view?

Dealing with a 409 conflict situation involving a document in Node.js using Nano library

What causes my absolutely positioned element to disappear when using overflow-x: hidden?

unable to connect css file to document

Encountering a situation where an empty value is being received from an

What is the process for importing DataTables using npm?

What steps should I take to make sure that the types of React props are accurately assigned?

Store live text field group in their respective index

Is it possible to change the background color of a Bootstrap button using CSS overrides?

JavaScript Deviance

Difficulty encountered while implementing the if-else statement in raycasting operations

Issues with Navigating through a Scrollable Menu

Efficient method for deleting a specific item from a JSON object in React.js

Puppeteer does not display the TikTok comment input, whereas it is visible on the browser

What causes the TypeError: 0 is not a function error when using Array.from as a callback for Array.flatMap?

Styles for Material UI 5 class names

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Similar to session_start() and $_SESSION in Node.js/Express

switch from ajax response to spring boot