jQuery - 获取具有动态内容的div的高度

时间:2016-02-04 14:25:56

标签: javascript jquery ajax dynamic

我在更改内容时遇到了读取div高度的问题

我的情景是......

我有一个可自定义的设计,用户可以上传照片。上传照片后,将重新加载设计预览以显示图像

我需要做的是读取图像的大小和父div的大小,以查看图像是否太大。如果是,我需要使图像可拖动,以便用户可以设置位置

目前我的代码就是这个......

function reloadPreview(data) {
    $.when(
        $.post('/ajax/get_design_preview.php', data, function(response) {
            $('#design_previews').html(response.preview);
        }, 'json')
    ).then(initDraggables);
}

function initDraggables() {
    $('.image_preview > img').each(function() {
        $(this).bind('load', function() {
            var img_height = $(this).height(),
                div_height = $(this).parent().height(),
                overlap_y = img_height - div_height;

            console.log('Img Height: ' + img_height);
            console.log('Div Height: ' + div_height);
            console.log(overlap_y);
        })
    })
}

我的宽度相同的代码完美无缺,但高度并没有给出正确的值

img_height和div_height变量总是匹配图像的高度(我当前测试中的680px)但是div有一个固定的高度,隐藏了溢出(动态应用,在我当前的测试中为380px)

我在宽度方面遇到了同样的问题,但添加了$ .when()。然后()修复了它

我还必须添加$(this).bind(' load',function(){以确保图像在读取高度之前已完全加载

我知道/假设它在应用div高度的样式之前与代码触发相关,但是我不确定如何判断何时发生这种情况或如何等待它在触发我的代码之前

非常感谢任何帮助

0 个答案:

没有答案