Question

Using javascript I’m trying to load images not on the current page (from an array of image links) and if they are large enough, add them to an array. I’m executing this after the current page has loaded, though a bookmarklet, or firebug console. Using FF.

The closest I’ve come is the below, but this does not seem to work, and I’m guessing this is because the size test is running before the images have loaded. Apparently my attempt to fix this with ‘onload’ does not work. How can I fix this up, or is there a better/simpler way to accomplish this task?

(function() {

    //create array for the images
    var imageArray = new Array();


    function loadIfBig(x){
            if (x.height > 299 && x.width > 299 && (x.height > 399 || x.width > 399)) {
                imageArray.push(x);
                //dispImage = '<img src=' + x.src + '><br>';
                //document.write('<center>' + dispImage + '</center>');
            }
        return true;
    }


    //given an array of imageLinks:
    for (x in imageLinks){
    //create an image form link and add to array if big enough
        im = document.createElement('img');
        im.src = imageLinks[x];
        im.onload = loadIfBig(im);
    }

    //view results:

    for (x in imageArray){
        disp_image = '<img src='+imageArray[x].src+'><br>';
        document.write('<center>'+disp_image+'</center>');
    }


})();

Update:

Thanks! sure you’re right and I’m missing something stupid here, but I made the change you suggested, and then pulled writing the elements into loadIfBig, but it doesn’t seem to be executing that function. current code below, including a couple sample input links:

(function() {
    var imageArray = new Array();

    var imageLinks = ['http://1.bp.blogspot.com/_mfMRTBDpgkM/SwCwu1RPphI/AAAAAAAAJpw/v9YInFBW84I/s1600/800px-San_Francisco_in_ruin_edit2.jpg','http://2.bp.blogspot.com/_mfMRTBDpgkM/SwCwulSZ_yI/AAAAAAAAJpo/NsRcJdpz4Dk/s1600/San_Francisco_PC_59.jpg']

    function loadIfBig(x){
            if (x.height > 299 && x.width > 299 && (x.height > 399 || x.width > 399)) {
                imageArray.push(x);
                dispImage = '<img src=' + x.src + '><br>';
                document.write('<center>' + dispImage + '</center>');
            }
            return true;
    }
    processImages = function(){
        for (x in imageLinks) {
            //create an image from link and add to array if big enough
            im = document.createElement('img');
            im.src = imageLinks[x];
            im.onload = function(){
                loadIfBig(this);
            }
        }

    }       
})();

Answer 1

Your fix doesn’t work because you’re actually executing it immediately.

im.onload = loadIfBig(im) is actually running the function.

What you can do is something like:

    im.onload = function() {
        loadIfBig(this); 
    }

Another problem is the fact that you’re running through the array of big images before the onload callbacks have actually executed. That needs to be stuck in a different function and called once all the onloads are done.