Блог

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

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

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

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

примечание: мне сложно кодировать изображения как base64 для отображения на холсте … возможно ли это или разумно это сделать?

На самом деле, вы можете определить, когда все изображения завершили загрузку. Для этого вам просто нужно указать функцию обратного вызова для 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;
    }
}
  

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