Determining the orientation of an image in JavaScript

Question

Determining the orientation of an image in JavaScript

Currently, I am attempting to determine the orientation of images using JavaScript in order to apply a specific class to them. This process seems to be functioning correctly on Firefox, but is presenting challenges on other browsers. It appears to work better with smaller images, leading me to believe that it may not be executing properly if the images are not fully loaded. Unfortunately, despite my efforts, I have been unable to find a solution to address this issue. Any help would be greatly appreciated!

Here is the code snippet I am currently using:

$(document).ready(function() {
$('.gallery a').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'landscape' : 'portrait';
$(this).addClass(imgClass);
})
});

.gallery {
display: flex;
flex-wrap: wrap;
width: 450px;
}
.gallery a {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
overflow: hidden;
}
.gallery a img.landscape {
align-self: center;
height: 100%;
filter: sepia(100%);
}
.gallery a img.portrait {
align-self: center;
width: 100%;
filter: grayscale(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
</a>
<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
</a>
<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
</a>
<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
</a>
</div>

javascript jquery html css browser

Answer 1

Answer №1

To begin with, it is important to implement a check to see if the image has finished loading; if not, you should add an event listener to initiate the loading process.

The loaded status of an image can be determined by checking if its width and height values are greater than 0. If these values equal 0, then the image has not been loaded. The reason why this may work in Firefox is due to the browser caching the images, resulting in them being loaded immediately.

A solution similar to the following code snippet can help resolve the issue:

function setImageClass(img) {
    var imgClass = (img.width / img.height > 1) ? 'landscape' : 'portrait';
    $(img).addClass(imgClass);
}

$(document).ready(function() {
    $('.gallery a').find('img').each(function() {
        if (this.width > 0) {
            setImageClass(this);
        } else {
          $(this).once('load', function () {
            setImageClass(this);
          });
        }
    })
});

Answer 2

To begin with, it is important to implement a check to see if the image has finished loading; if not, you should add an event listener to initiate the loading process.

The loaded status of an image can be determined by checking if its width and height values are greater than 0. If these values equal 0, then the image has not been loaded. The reason why this may work in Firefox is due to the browser caching the images, resulting in them being loaded immediately.

A solution similar to the following code snippet can help resolve the issue:

function setImageClass(img) {
    var imgClass = (img.width / img.height > 1) ? 'landscape' : 'portrait';
    $(img).addClass(imgClass);
}

$(document).ready(function() {
    $('.gallery a').find('img').each(function() {
        if (this.width > 0) {
            setImageClass(this);
        } else {
          $(this).once('load', function () {
            setImageClass(this);
          });
        }
    })
});

Answer 3

Answer №2

After much searching, I've discovered the solution! In order to retrieve the original values of an image, it is best to use naturalWidth and naturalHeight. For those who are interested, here is a snippet of code that works across all browsers. Big thanks to Samanime!

function setImageClass(img) {
var imgClass = (img.naturalWidth / img.naturalHeight > 1) ? 'landscape' : 'portrait';
$(img).addClass(imgClass);
}

$(document).ready(function() {
$('.gallery a').find('img').each(function() {
if (this.naturalWidth > 0) {
setImageClass(this);
} else {
  $(this).once('load', function () {
setImageClass(this);
  });
};
})
});

.gallery {
display: flex;
flex-wrap: wrap;
width: 450px;
}
.gallery a {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
overflow: hidden;
}
.gallery a img.landscape {
align-self: center;
height: 100%;
filter: sepia(100%);
}
.gallery a img.portrait {
align-self: center;
width: 100%;
filter: grayscale(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="gallery">
<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
</a>
<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
</a>
<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
</a>
<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
</a>
</div>

Answer 4

After much searching, I've discovered the solution! In order to retrieve the original values of an image, it is best to use naturalWidth and naturalHeight. For those who are interested, here is a snippet of code that works across all browsers. Big thanks to Samanime!

function setImageClass(img) {
var imgClass = (img.naturalWidth / img.naturalHeight > 1) ? 'landscape' : 'portrait';
$(img).addClass(imgClass);
}

$(document).ready(function() {
$('.gallery a').find('img').each(function() {
if (this.naturalWidth > 0) {
setImageClass(this);
} else {
  $(this).once('load', function () {
setImageClass(this);
  });
};
})
});

.gallery {
display: flex;
flex-wrap: wrap;
width: 450px;
}
.gallery a {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
overflow: hidden;
}
.gallery a img.landscape {
align-self: center;
height: 100%;
filter: sepia(100%);
}
.gallery a img.portrait {
align-self: center;
width: 100%;
filter: grayscale(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="gallery">
<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
</a>
<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
</a>
<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
</a>
<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
</a>
</div>

Determining the orientation of an image in JavaScript

Answer №1

Answer №2

Similar questions

Enable compatibility with high resolution screens and enable zoom functionality

Is there a method to redirect and display a JavaScript message efficiently?

Analyze XML elements and retrieve their associated content

A single Modal, Ajax, and data that is continuously refreshed

The footer is being obscured by the sidebar

Is there anyone who can provide a straightforward solution (code) for < something basic?

Issue with creating a new jstree node

Difficulty encountered in aligning items within neighboring table cells vertically

Is it common to encounter a "no such file or directory" error when running Docker-Compose with the command "ENTRYPOINT ['./init.sh']" in a Dockerfile?

Symfony2 AJAX form field updateIs Symfony2 form field update with

Updating MySQL TINYINT Value with AJAX in Bootstrap Toggle Without Reloading Page

When an AJAX call is made during a PHP session that has timed out

Filtering array objects based on elements in another array

Using AngularJS to iterate through JSON data

Issue with Achieving Two-Way Binding in Angular 1.5 Component when using $ctrl

AFRAME - Enhanced scene overlay

The elements on the webpage are spilling over with content

Is there a way to make changes to a pre-uploaded PDF document?

Select a Date: Input for Date Selection

How to use JQuery to automatically scroll to the bottom of a