响应调整内容图像的大小

Question

我的网站上有一个.content元素，其中包含主要内容。我希望能够在浏览器调整大小时调整图像大小。所以我做了一个jQuery函数。

首先调用setImgData()函数。这将循环显示所有图像，并将原始大小设置为data-w和data-h属性。

之后调用resizeImg()。根据原始宽度和高度，图像将调整为最大内容宽度（保持纵横比）。

问题是data-*属性未设置。可能是因为加载函数内的$(this)未指向内容图像。

我有什么想法可以解决这个问题吗？

function setImgData(callback) {
    $(".content img").each( function() {
        var img = $(this);
        var pic_real_width, pic_real_height;
        $("<img/>")
            .attr("src", $(img).attr("src"))
            .load(function() {
                pic_real_width = this.width;
                pic_real_height = this.height;
                $(this).data("w", pic_real_width);
                $(this).data("h", pic_real_height);
            });
    });
    callback();
}
function resizeImg() {
    var cWidth = $('.content').innerWidth();
    var cPaddL = $('.content').css('padding-left').replace("px", "");
    var cPaddR = $('.content').css('padding-right').replace("px", "");
    var contentWidth = cWidth - cPaddL - cPaddR;

    $(".content img").each( function() {
        var imgW = $(this).data('w');
        if( imgW > contentWidth ) {
            var imgH = $(this).data('h');
            var newH = Math.round( ( imgH * contentWidth ) / imgW );
            $(this).width( contentWidth ).height( newH );
        }
    });
};
$(function() {
    setImgData(function () {
        resizeImg();
    });
});
$(window).resize( function(){
    resizeImg();
});