使用ajax获取所有图像的文件大小并维护其他图像数据

Question

The goal - To loop through all images on a page and gather a range of information including image name, original width/height, actual width/height, ratio, display property and FILESIZE.

This is where I am coming unstuck. I am looping through all the images, getting all this information (see below). To obtain the filesize, I am running an ajax call using each image url to return the filesize.

My issue comes that I am unable to return each filesize for each image into a variable (like the other variables) to then be able to display in a list on the page. I have successfully got the filesizes (by console logging) but not using them in any other way.

Here is where I have got to:

/*LOOP THROUGH EMAIL IMAGES*/
$('body').find('img').each(function() {

    elem = $(this);
    /*ACTUAL DIMENSIONS*/
    img = new Image();
    img.src = elem.attr('src');
    actWidth = img.width;
    actHeight = img.height;
    /*HTML DIMENSIONS*/
    iWidth = elem.width();
    iHeight = elem.innerHeight();
    /*IMAGE FILENAME*/
    index = img.src.lastIndexOf("/") + 1;
    filename = img.src.substr(index);
    /*IMAGE RATIO*/
    ratio = (actWidth / actHeight).toFixed(2);
    newRatio = parseFloat(ratio);

    /*FILESIZE*/
    sizeKB = '';

    $.ajax({
        type: 'HEAD',
        url: img.src,
        success: function(data, textStatus, request){

            //THIS IS WHERE I NEED TO COLLECT THE FILESIZE AND PLACE IT IN A VARIABLE THAT CAN BE USED

            console.log(request.getResponseHeader('Content-Length'));

            sizeKB = request.getResponseHeader('Content-Length');
            return sizeKB;
        }
    });

    console.log(
        'Display: '+displayProp+
        ', Name: '+filename+
        ', Actual size: '+actWidth+'x'+actHeight+
        ', Email size:'+iWidth+'x'+iHeight+
        ', Aspect Ratio: '+newRatio+':1'+
        ', Size: '+sizeKB
    );

});

As is stands, when I try to return the sizeKB from the success call back into the console.log with the other data, it is empty.

Any help would be greatly appreciated

Answer 1

The thing here is you are calling the console.log() synchronously while AJAX works asynchron. That means when you are logging the values you don't really have the image's size as it loads a couple of milliseconds later.

Just move your console.log into your success function and it will work as you call it when the AJAX is done rather than calling it as before said synchronously.

Your old code will be changed from:

$.ajax({
    type: 'HEAD',
    url: img.src,
    success: function(data, textStatus, request){

        //THIS IS WHERE I NEED TO COLLECT THE FILESIZE AND PLACE IT IN A VARIABLE THAT CAN BE USED

        console.log(request.getResponseHeader('Content-Length'));

        var sizeKB = request.getResponseHeader('Content-Length');
        return sizeKB;
    }
});

console.log(
    'Display: '+displayProp+
    ', Name: '+filename+
    ', Actual size: '+actWidth+'x'+actHeight+
    ', Email size:'+iWidth+'x'+iHeight+
    ', Aspect Ratio: '+newRatio+':1'+
    ', Size: '+sizeKB
);

to:

$.ajax({
    type: 'HEAD',
    url: img.src,
    success: function(data, textStatus, request){

        //THIS IS WHERE I NEED TO COLLECT THE FILESIZE AND PLACE IT IN A VARIABLE THAT CAN BE USED

        console.log(request.getResponseHeader('Content-Length'));

        var sizeKB = request.getResponseHeader('Content-Length');

        console.log(
            'Display: '+displayProp+
            ', Name: '+filename+
            ', Actual size: '+actWidth+'x'+actHeight+
            ', Email size:'+iWidth+'x'+iHeight+
            ', Aspect Ratio: '+newRatio+':1'+
            ', Size: '+sizeKB
        );
    }
});

Answer 2

Well I did a rough script. This will make an object of all the images and its relevant data. You can use this data later on where ever you want.

 var imagesData = {},
    images = $('body').find('img');

images.each(function() {
    var image = {},
        elem = $(this),
        img = new Image();

    img.src = elem.attr('src');
    var index = img.src.lastIndexOf("/") + 1,
        ratio = (img.width / img.height).toFixed(2);

    image["name"] = img.src.substr(index);
    image["width"] = img.width;
    image["height"] = img.height;
    image["html_width"] = elem.width();
    image["html_height"] = elem.innerHeight();
    image["ratio"] = parseFloat(ratio) + ":1";
    imagesData[img.src] = image

    $.ajax({
        type: 'HEAD',
        url: img.src,
        success: function(data, textStatus, request){
            imagesData[this.url]["size"] = request.getResponseHeader('Content-Length');
        }
    });

});
console.log(imagesData);