从 JavaScript Image Onload 函数获取图像宽度的值

Question

我有以下获取给定图像宽度的方法：

<!DOCTYPE html>
<html>
<head>
    <title>Image Width</title>
    <script>
        var img = new Image();
        img.onload = function() { 
            alert("Width: " + img.width);
        };
        img.src="http://www.hq.nasa.gov/office/pao/History/alsj/misc/apmisc-60-SAT-1.jpg"

        // Do something with 'img.width' here, outside the image onload event handler.

    </script>
</head>
<body>
</body>
</html>

我知道我需要在获取图像宽度之前加载图像，以及如何从图像加载事件处理程序中获取图像宽度，但我遇到了真正的困难从处理程序外部访问其宽度。

我是不是白痴而错过了一些非常简单的东西，还是比我想象的更复杂？

如有任何帮助，我们将不胜感激。

问候，史蒂夫。

Answer 1

你遇到的问题是异步编程。 onload函数稍后会被引擎调用，程序会暂停执行。

有两种选择：

如果您需要尽快获得该值，则必须运行 onload 中的代码，例如：

var img = new Image();
img.onload = function() { 
    alert("Width: " + img.width);
    // Do something with 'img.width' here, outside the image onload event handler.
};
img.src="http://www.hq.nasa.gov/office/pao/History/alsj/misc/apmisc-60-SAT-1.jpg"

如果将访问 img.width 的代码稍后发生，例如用户点击后，您可以存储该值并在其他地方使用它：

var width;

var img = new Image();
img.onload = function() { 
    width = img.width;
};
img.src="http://www.hq.nasa.gov/office/pao/History/alsj/misc/apmisc-60-SAT-1.jpg"

function anotherFunction() {
    alert(width);
}

Answer 2

我不确定我是否理解您要执行的操作，但如果您想访问图像的宽度，那么我建议您阅读更多有关异步代码的内容。

img.onload = function() {} 代码的作用是安排在图像加载后调用的函数。
然而，它后面的代码只是在调度发生后立即执行（同步），这很可能会在图像加载之前。

因此，您需要延迟它的执行，直到加载图像，这正是 img.onload 的意思。

从 JavaScript Image Onload 函数获取图像宽度的值

Getting Value of Image Width from JavaScript Image Onload Function

javascript

onload