Question

我正在制作一个灯箱，我需要显示一个图像元素的原生尺寸。我正在研究CSS-Tricks基于off this tutorial的方法。我的图片原生是400x400像素，但我的方法不断返回0x0。这是相关的代码：

    function setLuxboxSize () {
    console.log("picture original: " + luxpic.attr('src'));

    var testingImage = new Image();

    testingImage.src = luxpic.attr('src');

    //console.log('testingImage src:' + testingImage.attr('src'));


    var picWidth = testingImage.width;
    var picHeight = testingImage.height;


    console.log("original width: " + picWidth);
    console.log("original height: " + picHeight);
};

此外，当注释掉的console.log行处于活动状态时，我在控制台中收到以下错误：Uncaught TypeError：Object＃没有方法'attr'。第一个console.log行按预期返回src。我做错了什么？

编辑：问题是图像尚未加载，宽度和高度调用将不会返回正确的值，直到它为止。检查LorDex或Satpal的答案，使用onload函数获取尺寸。

Answer 1

您可以在加载后检查实际图像大小。为此，请使用.onload（）方法：

testingImage.onLoad(function() {
    var picWidth = testingImage.width;
    var picHeight = testingImage.height;
    console.log("original width: " + picWidth);
    console.log("original height: " + picHeight);
});

Answer 2

您必须先加载图像，然后才能检查其尺寸。

var testingImage = new Image();
testingImage.src = luxpic.attr('src');
testingImage.onload = function () { 
    var picWidth = this.width;
    var picHeight = this.height;

    console.log("original width: " + picWidth);
    console.log("original height: " + picHeight);
};

为什么这不能获得图像的原生尺寸？

2 个答案: