html5 изображения холста не отображаются или изображение не загружено

Question

я удалил ссылку по причине авторского права! .. извините!

Когда вы находитесь в Firefox, изображения слева (все макеты) загружаются, после нескольких обновлений, в Chrome и Safari,это НИКОГДА не показывает

Я думаю, что это изображение не загружено в памяти проблемы, но я не могу знать, когда все изображения загружены, я событие положить сценарий в конце, но не повезло

Так чтовопрос, что нужно сделать, чтобы изображения загружались .. или есть ли ошибка в коде JavaScript?

nb У меня есть проблемы с кодированием изображений как 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;
    }
}

Ключевой концепцией является то, что вы отслеживаете количество изображений, которые закончили загрузку. После загрузки всех изображений вы можете рисовать на холсте.