0

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

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

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

    img.onload = function() {
        global_image_loaded = 1;
    }

    if ( global_image_loaded = 1 ){
        return img;
    } else {
        return 0;
    }
}

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

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);
        }
    };
}
4

1 回答 1

1

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

泰

于 2013-05-21T10:53:50.820 回答