Removing small images

Question

I have following script to remove images that are too small but it doesn't work properly, first time I load the page, every image gets replaced with no-image.png, after I refresh page it works properly, what am I missing here?

$(document).ready(function () {
    $('.story-img').error(function () {
        $(this).attr("src", "/Images/no-image.png");
        $(this).css('border', 'none');
    });

    $(".story-img").each(function () {

        var theImage = new Image();
        theImage.src = $(this).attr("src") || $(this).src;

        var imageWidth = theImage.width;
        var imageHeight = theImage.height;

        if (imageWidth < 32 || imageHeight < 32 || $(this).height() < 32 || $(this).width < 32) {
            $(this).attr("src", "/Images/no-image.png");
            $(this).css('border', 'none');
        }

    });
});

Do you know what values `imageWidth` and `imageHeight` have? I guess it's because the images are not loaded yet and therefore have a width and height of 0. You could try replacing `.each` with `.load`. BTW: the line ending in `|| $(this).src;` should be `|| this.src;` — Thomas, Aug 22 '12 at 07:34
@Thomas, thanks for the tips, I will try to make changes and see if it helps. — formatc, Aug 22 '12 at 07:36
If the problem is still there after the changes, make a fiddle for us to play around with. — sQVe, Aug 22 '12 at 07:36
Or you can specify the image widths and heights with something like `` — irrelephant, Aug 22 '12 at 07:37
@irrelephant thats why I am replacing Images, it looks ugly when you streach icon of 32x32 to 200x200 — formatc, Aug 22 '12 at 07:38
@Thomas Would it make more sense to attach .load handler to theImage object, if that is even possible? — formatc, Aug 22 '12 at 07:39
The 200s are just an example; you should replace them with the actual values. Or are you saying that you don't know the dimensions beforehand? — irrelephant, Aug 22 '12 at 07:42
By the way, you can use `.load` as @Thomas suggested - see http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome — irrelephant, Aug 22 '12 at 07:43
@irrelephant That solved it, replacing `.each` with `.load`, I just have to check for any browser quirks. Thanks guyes! — formatc, Aug 22 '12 at 07:46

score 1 · Accepted Answer · answered Aug 22 '12 at 08:34

1

You're probably checking the with of the images before they're loaded (which makes their width and height equal 0). You can use $(image).load():

$(".story-img").load(function () {

    //...

});

answered Aug 22 '12 at 08:34

Thomas

8,426
1
25
49

score 0 · Answer 2 · answered Aug 22 '12 at 07:41

0

It could be because the image data hasn't finished loading before the page html is finished loading. You could use the javascript LOAD event, which waits until all images are finished loading. Use

$(window).load(function(){}

answered Aug 22 '12 at 07:41

Trevor Newhook

889
1
11
29

Removing small images

2 Answers2