使用ajax获取所有图像的文件大小，并维护额外的图像数据

Obtaining filesize of all images using ajax and maintaining additional image data

本文关键字：图像 维护 数据 文件大小 ajax 使用 获取      更新时间：2023-09-26

目标-循环浏览页面上的所有图像，并收集一系列信息，包括图像名称、原始宽度/高度、实际宽度/高度，比率、显示属性和FILESIZE。

这就是我要摆脱困境的地方。我正在循环浏览所有的图像，获得所有这些信息（见下文）。为了获得文件大小，我运行了一个ajax调用，使用每个图像url来返回文件大小。

我的问题是，我无法将每个图像的每个文件大小返回到一个变量中（就像其他变量一样），然后才能在页面上的列表中显示。我已经成功地获得了文件大小（通过控制台日志记录），但没有以任何其他方式使用它们。

这是我要去的地方：

/*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
    );
});

按照目前的情况，当我试图将成功调用的sizeKB与其他数据一起返回到console.log时，它是空的。

如有任何帮助，将不胜感激

这里的问题是，当AJAX异步工作时，您正在同步调用console.log()。这意味着，当你记录这些值时，你并没有真正的图像大小，因为它在几毫秒后加载。

只需将console.log移动到success函数中，当AJAX完成时，它就会像您调用它一样工作，而不是像以前所说的那样同步调用它。

您的旧代码将从更改

$.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
);

至：

$.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
        );
    }
});

我做了一个粗略的脚本。这将生成所有图像及其相关数据的对象。以后您可以在任何需要的地方使用这些数据。

 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);
相关文章：