-1

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 ?

Community
  • 1
  • 1
Ionut Flavius Pogacian
  • 4,750
  • 14
  • 58
  • 100

3 Answers3

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();
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Jon Taylor
  • 7,865
  • 5
  • 30
  • 55
  • 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. – Ionut Flavius Pogacian Jul 17 '12 at 12:26
  • If all the images have loaded then you can check their sizes using the clientWidth attribute as soon as the DOM loads if you are confident that the images will deffinately be loaded in time. I think it is still worth checking though since bookmarklets could potentially on a slow connection be invoked before images have finished loading. – Jon Taylor Jul 17 '12 at 12:30
  • In the checkWidth function you can check its width and height and decide whether to reload or not. – Jon Taylor Jul 17 '12 at 12:32
  • As I mentioned in my post this is completely achievable in javascript and I was giving an example as to the flow which is required to do what you asked. The code above can i'm sure be converted to plain javascript by yourself. I'm not going to write out peoples code on SO, I will however give them pointers and help when thinking about how to solve a problem. – Jon Taylor Jul 17 '12 at 12:34
  • As per my quote above **"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 workign on earlier I will show you how it can be done in jQeury."** – Jon Taylor Jul 17 '12 at 12:37
  • I have the solution, i just need to check the image sizes; and it gets tricky because you have to try and get the widt from: css file, real file width, width attribute; And i dont know the right JS code. – Ionut Flavius Pogacian Jul 17 '12 at 12:37
  • Thw width attribute whether inline or from a css file will be stored in clientWidth. – Jon Taylor Jul 17 '12 at 12:38
  • Be careful though with client width as different box models on different browsers may return slightly different values. – Jon Taylor Jul 17 '12 at 12:40
1

To know the dimensions of an image, you need either :

  • to have the image loaded (then clientWidth is OK if your script is executed in an onload callback)
  • to have them specified as attributes (<img src=... width=33>). In this case use imgObj[i].getAttribute('width');

Note that if you want to reload an image and avoid all cache problems, the simplest is to change its URL, for example like this :

var srcbase = imgObj.getAttribute('src').split('?')[0];
imgObj.src = srcbase + '?time='+(new Date()).getTime();

(this supposes the image is defined by the path until the '?')

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
0

This is it guys, and it works perfect.

populateImgsList : function()
    {

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

    var j = 0;

    for(var i=0;i<imgObj.length;i++)
    {

    if(consoleLog)console.log('w '+imgObj[i].clientWidth+' h: '+imgObj[i].clientHeight);

    if( (imgObj[i].clientWidth>100) && (imgObj[i].clientHeight>100) )
    {

    imgsList[j] = imgObj[i].getAttribute('src');
    if(consoleLog)console.log(imgsList[j]);

    j++;

    }

    }

    return images = imgList;

    },
Ionut Flavius Pogacian
  • 4,750
  • 14
  • 58
  • 100