Question

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

这是一个在传递文件路径后返回加载的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);
        }
    };
}

Answer 1

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

TY

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

1 个答案: