Блог

Главная - Вопросы по программированию - Как я могу загрузить изображения в память перед отображением на p5.js/javascript?

Как я могу загрузить изображения в память перед отображением на p5.js/javascript?

#javascript #html #processing #p5.js

Вопрос:

Я написал некоторый код для очень быстрого последовательного отображения изображений, однако между ними часто возникают промежутки, когда загружаются изображения, что чрезвычайно раздражает. Мне было бы любопытно, как я мог бы избавиться от этих больших пробелов. У меня есть около 1000 изображений, поэтому я пытаюсь сделать этот код как можно менее утомительным. Моей текущей мыслью было бы каким-то образом загрузить их в память сначала с помощью p5.js. Все, что угодно, помогает!

 let faces = [];
let i = 0

function preload(){
    window.onload = setInterval(() => {
        i  
        if(i > 999){
            i = 0;
        } 
        faces[i] = loadImage(`aberdeen_results/${i}.jpg`)
    }, 400);
}


function setup(){
    createCanvas(innerWidth,innerHeight); 
}

function draw(){
    background(256)
    image(faces[i], 450, 150,);
}

Ответ №1:

По моему опыту, если это изображение заполнит весь экран, вы можете использовать

 background(faces[i]);

и это уступает меньшему отставанию, может быть, это помогло бы.

Ответ №2:

В вашем коде были некоторые недостатки, так как он выдавал ошибки с моей стороны.

Вам не нужно использовать window.onload , и setInterval в документации inside preload() .
P5 говорится: «Если определена функция предварительной загрузки, setup() будет ждать завершения любых вызовов загрузки внутри». Поскольку вы непрерывно загружали изображение с помощью loadImage() inside setInterval , setup() оно никогда не будет вызвано.

Вы можете использовать setInterval внешнюю часть preload() для обновления i .

(Я использовал только 10 изображений для демонстрационных целей)

Фиксированный Код:

 let faces = [];
let i = 0

function preload() {
  for (let k = 0; k < 10; k  ) {
    faces[k] = loadImage(`https://picsum.photos/450/150?random=${k}`)
  }
}


function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
}

setInterval(() => {
  i  ;
  if (i > 9) {
    i = 0;
  }
}, 400)

function draw() {
  background(256)
  image(faces[i], 0, 0);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Кроме того, не рекомендуется загружать все 1000 изображений, так как это займет огромное количество оперативной памяти и может привести к сбою браузера. У меня не было никаких проблем с пробелами между изображениями (возможно, bcoz только из 10 изображений, но с 1000 изображениями наиболее вероятной причиной разрыва была бы оперативная память).

Метки: