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

发布于 2024-09-12 07:33:23 字数 903 浏览 4 评论 0原文

我通过以下 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。

关于如何获得高度有什么想法吗？

谢谢！

原文

i load graphs via the following javascript function:

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'] ?>';   
}

however, the graph height is unknown until it is drawn. i was wondering if there was a way to get this height after it has loaded and set the container height to cet height.

i thought about putting:

.css("height", THE_IMAGE_HEIGHT)

in the onload function, but i am having trouble finding this image's height. debugging shows that (inside the onload):

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

now the last one, this.height, is clearly referring to the container, which is set with a height of 425px.

any ideas as to how to get the height?

thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏雨凉 2024-09-19 07:33:23

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

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

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

Give that a go and tell me what happens, also check your console log to see if the Object is the image element.

回复收藏 0 原文

~没有更多了~