javascript - Javascript：图像加载后将图像容器高度调整为动态图像高度？

Question

我通过以下 javascript 函数加载图表：

function loadMCorCBGraph(self,surveyID,questionID,varID) {
    var img = new Image();

    img.onload = function() {
        $(self).parents().parents().siblings(".graph_container")
        .empty().append(img);
    };

    img.src = 'drawGraph.php?type=surveys_report_MC_or_CB&surveyID=' + surveyID + '&questionID=' + questionID +
        (varID != null ? '&varID=' + varID : '') + '&companyID=<?php echo $_SESSION['companyID'] ?>';   
}

但是，在绘制之前，图形高度是未知的。我想知道是否有办法在它加载并将容器高度设置为 cet 高度后获得这个高度。

我想过把：

.css("height", THE_IMAGE_HEIGHT)

在 onload 函数中，但我无法找到此图像的高度。调试显示（在 onload 内）：

$(this).height() = 0
img.height = ReferenceError: img is not defined
this.height = 425

现在最后一个，this.height，显然是指容器，它的高度设置为 425px。

关于如何获得高度的任何想法？

谢谢！

Answer 1

img.onload = function() {
    $Container = $(self).parents().parents().siblings(".graph_container");

    $Container.empty().append(img);

    this.find('img').each(function(){
        //Dynamically check each image
        if(this.height > 400)
        {
            $(this).height(400);
        }
        console.log(this); //Should see object with attribs.
    })
};

试一试，告诉我会发生什么，还要检查您的控制台日志以查看对象是否是图像元素。