Фоновые переходные затухания javascript и css

Question

Я новичок в javascript. Я сделал простой код, который в javascript будет случайным образом менять мой фон каждые 5 секунд, однако это выглядит ужасно.
Как при загрузке изображения, так и при переходе происходит скачкообразный характер и он выглядит не очень хорошо. Когда я решаю эту проблему, весь код выглядит очень сложным, мне также не разрешают использовать внешние ссылки для справки (это школьный проект).

Я хочу реализовать переходы с плавным переходом в мой код, и я видел, как люди делают это, используя CSS, но для этого вам нужно добавить каждую картинку и бла-бла-бла, я хочу, чтобы она была многоразовой, чтобы я написал ее один раз, а затем, если я добавлю больше картинок, у меня не будет изменить что-нибудь, надеюсь, что вы, ребята, понимаете, и надеюсь, что вы можете помочь !!! :)

Код:

function random_pic() {
  // image array
  var images = ["url(1.jpg)", "url(2.jpg)", "url(3.jpg)", "url(4.jpg)"];

  // execute code every 5 seconds
  window.setInterval(function() {
      // create a random number between 0 and 4
      var num = Math.floor(Math.random() * 4);
      // set the background to one of the images in the array
      document.body.style.backgroundImage = images[num];
    },
    5000);
}

random_pic();

Answer 1

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

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

1. Для кроссфейдинга вам понадобится 2 элемента, которые используют анимацию постепенного изменения (css непрозрачность) для создания эффекта.
2. Как только исчезающий элемент полностью исчезнет, ​​замените источник изображения на новый и снова включите его, в то время как другой элемент исчезнет, ​​и повторите процесс.
3. Изменяя источник изображение, когда оно невидимо для пользователя, вы, вероятно, будете выглядеть лучше, потому что изображение будет загружено до того, как оно будет показано пользователю.
4. Чтобы оно работало, убедитесь, что изображения, которые вы используете настолько малы, насколько это возможно в размере файла. Для справки я бы попытался держать их под 100 КБ для начала.
5. Вы также можете изучить предварительную загрузку изображений, но это может быть слишком далеко для школьного задания.

Надеюсь, это поможет. Удачи.