Question

I want to load only certain images from HTML DOM, based on image width and height.

I dont know how to access the width and height properties of a image using JavaScript.

This must run under any browser.

My app is a bookmarklet, so all the images will be loaded by the time a user will start the bookmarklet. So, i will only scan the DOM, get all the img srv values, and use them. The trick is that i dont want all the images, just the ones that match my wanted sizes.

I have this code so far, and it gets all the images from DOM :

var imgObj = document.getElementsByTagName('img');

for(var i=0;i<imgObj.length;i++)
{
imgsList[i] = imgObj[i].getAttribute('src');
if(consoleLog)console.log(imgsList[i]);
}

return images = imgObj.length;

my problem has been solved here: How to get image size (height & width) using JavaScript?

But i dont know how to adapt my code to img.clientWidth

Is it imgsList[i].clientWidth ?

Answer 1

imgObj[i].clientWidth, imgList contains a list of just the src attributes.

Be careful when using any widths and heights of images as they load asynchronously into the browser. This means that when the DOM loads the width and height will be 0. Only after the images themselves finish loading will the element have a width and height appropriately set.

To get around this you can have load handlers whose callback will be executed once the image finishes loading.

Again though a slightly odd behaviour is that a browser that caches the image will not call this load function again (at least not ones in jQuery) and so you need to make sure for cached versions you do any width checks in a DOM load callback.

You can do this in standard javascript however as an example and since I have a jQuery example in front of me which I was working on earlier I will show you how it can be done in jQuery.

Suppose the image has an id=imageid

function checkWidths() {
    //do anything you want here

    //jQuery uses the .width and .height functions to get the appropriate attributes of an element, these return a value without the px % etc.  To get the actual css use .css('width') instead.
}

$(document).ready(function() {
    if($('#imageid').width() > 0)
        checkWidths();
});

$('#imageid').load(function() {
    checkWidths();
}