Question

我删除版权原因的链接！对不起！

当你在Firefox中时，左边的图像（所有模型）都会加载，经过一些刷新后，在chrome和safari中，它永远不会显示

我认为这是一个没有加载内存问题的图片，但是我不知道图片什么时候全部加载，我的事件把脚本放在最后，但没有运气

所以问题是，应该怎么做才能使图像被加载..是否存在JavaScript代码中的错误？

n.b。我很难将图像编码为base64用于画布显示...这样做是否可行或聪明？

Answer 1

实际上，您可以确定所有图像何时完成加载。为此，您只需要为图像对象的onload属性指定一个回调函数。所以，你最终会得到这样的东西（除了canvas.js中已有的代码）：

var loaded_images = 0;
var image_objects = [];

// This is called once all the images have finished loading.
function drawOnCanvas() {
    for (var i = 0; i < image_objects.length; ++i) {
        ctx.drawImage(image_objects[i], 0, 0); 
    }
}

function handleLoadedImage() {
    ++loaded_images;

    // Check to see if all the images have loaded.
    if (loaded_images == 7) {
        drawOnCanvas();
    }
}

document.ready = function() {
    for (var i=0;i<myimages.length;i++) {
        var tempimage = new Image();
        tempimage.src= myimages[i];
        tempimage.onload = handleLoadedImage;
        image_objects[i] = tempimage;
    }
}

关键概念是您要跟踪已完成加载的图像数量。完成所有图像加载后，您就知道可以在画布上绘制。

html5画布图像不显示或图像未加载

1 个答案: