为什么JavaScript使检查图像是否已加载变得如此困难？

为什么检查一个img是否加载了JavaScript那么困难？对于其他语言，这可以通过执行循环并在图像加载时中断来轻松解决

下面是一个函数，它在传递文件路径后返回加载的img。除了onload之外，似乎没有其他方法可以检查图像是否已加载。在每次加载完成之前，我无法使用img.complete或任何其他循环检查方法，因为它根本无法工作（浏览器将挂起）

此函数工作正常，直到我尝试使用以下函数将图像绘制到画布：

function IMAGE(elementid, img, x, y, w, h) {
        var mode = 0;

        if ( w === undefined) {
            mode = 1;
        }

        if ( h === undefined) {
            mode = 1;
        }

        var canvas = document.getElementById(elementid);
        if ( ! canvas || ! canvas.getContext ) { return false; }
        var ctx = canvas.getContext('2d');

        if ( mode === 1) {
            ctx.drawImage(img, x, y);
        }

        if (mode === 0) {
            ctx.drawImage(img, x, y, w, h);
        }
    }

此函数也可以工作，但仅当放置在循环中并运行多次时才起作用。图像将显示在画布上，但执行一次后不会加载图像。这怎么可能，img还没有加载吗

我认为JavaScript就是这样做的，不幸的是img无法返回，并且需要始终在之后显示？似乎无法任意显示图像

   function PLACEIMAGE(elementid, imagesrc, x, y, w, h) {
    var mode = 0;

    if ( w === undefined) {
        mode = 1;
    }

    if ( h === undefined) {
        mode = 1;
    }

    var canvas = document.getElementById(elementid);
    if ( ! canvas || ! canvas.getContext ) { return false; }
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = imagesrc + "?" + new Date().getTime();
    img.onload = function() {

        if ( mode === 1) {
            ctx.drawImage(img, x, y);
        }

        if (mode === 0) {
            ctx.drawImage(img, x, y, w, h);
        }
    };
}

---

好的，我试图做的似乎不可能，或者至少在Javascript中不太容易做到 供参考：

---

天

男孩，这个问题听起来很烦人。您的第一个函数有缺陷，因为

if（global\u image\u loaded=1）{

将始终设置变量并传递条件。JavaScript是单线程的，但允许异步代码执行。您的第一个函数是反模式。如果您希望在加载映像后运行某些代码，则应将回调函数传递给

LOADIMAGE

函数，如果image是

.complete

，或者将其分配给

img.onload

属性。非常短且简单。为什么这个标记为crockford？！起初我确实使用onload和回调，但我在这里尝试的是加载一个映像并通过调用单个函数LOADIMAGE返回img。

   function PLACEIMAGE(elementid, imagesrc, x, y, w, h) {
    var mode = 0;

    if ( w === undefined) {
        mode = 1;
    }

    if ( h === undefined) {
        mode = 1;
    }

    var canvas = document.getElementById(elementid);
    if ( ! canvas || ! canvas.getContext ) { return false; }
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = imagesrc + "?" + new Date().getTime();
    img.onload = function() {

        if ( mode === 1) {
            ctx.drawImage(img, x, y);
        }

        if (mode === 0) {
            ctx.drawImage(img, x, y, w, h);
        }
    };
}