Почему это решение для предварительной загрузки изображений CSS работает только в Chrome и Opera? - PullRequest
Новая
       36

Почему это решение для предварительной загрузки изображений CSS работает только в Chrome и Opera?

0 голосов
/ 17 июня 2019

Я пытаюсь изменить цвет фона каждые 6 секунд.Есть три изображения, которые должны вращаться, и все они упоминаются в CSS как фоновые изображения, связанные с определенным именем класса.JavasScript поворачивает имена классов в div каждые шесть секунд.

Он работает в любом браузере, за исключением одной небольшой проблемы: при первой загрузке фоновых изображений они все мерцают.Я понимаю, что этого можно избежать, предварительно загрузив изображения.Тем не менее, я не нашел решения, которое работает во всех «современных браузерах» (Chrome, FF; Opera, Edge, Safari).

Я попытался добавить дополнительную разметку HTML с теми же URL-адресами фонового изображения, которые затемЯ не отображал с помощью css (display: none ИЛИ width: 0; height:0; overflow: hidden) - работал только в Chrome и Opera.

Затем я попытался написать функцию JS, которая создает новый объект изображения для каждого из изображений и назначаетатрибут src для них с newImg.src="something это работало только в Chrome.

Я также пытался добавить теги <link rel="preload> и <link rel="prefetch"> в заголовок HTML.Оба работали только в Chrome и Opera, хотя, по мнению caniuse.com, по крайней мере, предварительная выборка должна работать и в Edge, и в FF.

Мое текущее решение, которое все еще работает только в Chrome и Opera, похоже на первоепробовал: 

body::after {
  position: absolute; 
  width: 0; 
  height: 0; 
  overflow: hidden; 
  z-index: -1;
  content: url('imgURL/Img1.jpg') url('imgURL/Img2.jpg') url('ImgURL/Img3.jpg');
}

Так как это работает в Chrome и Opera, я уверен, что я не набрал опечатки URL изображения.Кроме того, я все время очищаю кеш, чтобы он не мешал работе веб-сайта.

CSS: 

.first{
  background-image: url('...');
}

.second {
  background-image: url('...');
}

.third {
  background-image: url('...');
}

Функция JS, которая вызывается вsetInterval каждые 6 секунд: 

function changeImage() {
  const page = document.getElementById('pageId');
  const styleNames = ['first', 'second', 'third'];
  const currentStyle = page.getAttribute('class');
  const nextStyle = styleNames[styleNames.indexOf(currentStyle) + 1];

  if (styleNames.indexOf(currentStyle) === styleNames.length - 1) {
    page.className = styleNames[0];
  } else {
    page.className = nextStyle;
  }
}

Я ожидаю, что хотя бы одно из указанных выше решений будет работать во всех браузерах (т. е. загружать изображения без мерцания при первом их отображении), но ни одно из них не работало идеально иУ меня нет идей ... Любая помощь очень ценится.Заранее спасибо.

...