Question

所以我试图读取通过jquery创建的img元素的高度和宽度。

这是我试图执行的代码

$(document).ready(function() 
{
    $.ajax({
            url: 'res/script/getImage.php', 
            type: 'POST',
            data: {
                param  : 'Load'
            },
            success: function(result)
            {
                ImageArray = JSON.parse(result);
               for(i=0; i<ImageArray.length; i++)
                {
                        //Read the Image element and update to gallery

                        document.getElementById("gallery").innerHTML += ImageElement;
                        ImageArrayComplete[ImageCounter] = ImageArray[i].image;
                        UserArrayComplete[ImageCounter]  = ImageArray[i].user;

                }

             //Create Canvas
            $('#gallery img').each(function() {
                console.log(this);
                console.log('Width=' + this.width+ 'Height='+this.height);
                createCanvas(this);
            });

            }
        });
});

console.log(this);的输出是图像的路径，与预期的一样。

但是在初始页面加载期间，console.log('Width=' + this.width+ 'Height='+this.height);的输出对于宽度和高度都是0。

刷新页面后，该值将重置为实际宽度200。

在firefox和chrome中都没有抛出其他错误。我在这里失踪了什么？

Answer 1

您确定 img 选择是否具有高度和宽度值？

Answer 2

您的ImageElement对象未定义。试试这个：

变化

document.getElementById("gallery").innerHTML += ImageElement;

到

$('<img/>').attr('src', ImageArray[i].image).appendTo($('#gallery'));

和this对象没有height和width属性。如果你想获得高度，请使用：

console.log('Width=' + $(this).width() + 'Height=' + $(this).height());

页面加载和页面刷新的价值差异

2 个答案: