Изображение не завершено. Как сделать обратный вызов и загрузить изображение? Функция рисования внутри setInterval - PullRequest
Новая
       5

Изображение не завершено. Как сделать обратный вызов и загрузить изображение? Функция рисования внутри setInterval

0 голосов
/ 01 августа 2020 
draw() {
        if (this.finalXPos > (-canvas.width) && this.finalXPos < canvas.width) { //render image
            if (this.base_image.complete) {
                ctx.drawImage(this.base_image, this.finalXPos, this.yPos, canvas.width, canvas.height);
            }
            else {
                console.log('IMG BACKGROUND ' + this.base_image.src + ' NOT COMPLETE');
               //WHAT TO DO?
            }
        }
    }

1 Ответ

1 голос
/ 02 августа 2020

Если Image.complete равно false, то загрузка все еще продолжается. Нет необходимости пытаться перезагрузить изображение. Вы можете просто проверить complete еще раз в следующем кадре,

ПРЕДУПРЕЖДЕНИЕ Image.complete будет true после завершения загрузки, но это не означает, что изображение доступно для рендеринга, поскольку любые ошибки при загрузке будут complete процесс загрузки изображения.

В идеале вы должны прослушивать события Image (load и / или error), чтобы вы могли быть уверены, что оно может быть отображено.

Альтернатива семафор, указывающий, что изображение готово к рендерингу, также будет намного лучше, чем использование Image.complete семафора 

requestAnimationFrame(renderLoop);
var canRenderImage;  // undefined

const img = new Image;
img.src = "??????";
img.addEventListener("load", () => canRenderImage  = true, {once: true});    
img.addEventListener("error", () => canRenderImage  = false, {once: true});



function renderLoop() {
    if (canRenderImage) {  // is it safe to render the image
        ctx.drawImage(img, 0, 0);
    } else if (canRenderImage === false) {
        ...
        // what ever the plan is when there is missing content
        ...
    } // else image is not complete try again next frame

    ... code

    requestAnimationFrame(renderLoop);
}
...