HTML-фоновое изображение мигает - PullRequest
Новая
       38

HTML-фоновое изображение мигает

0 голосов
/ 27 сентября 2018

Я пытаюсь создать веб-сайт, и на странице входа в систему будет фон, содержащий серию из 10 или более изображений, которые постепенно исчезают и исчезают с интервалами в несколько секунд.По какой-то причине, когда изображения меняются, на короткую долю секунды я замечаю вспышку с цветом фона (белый в моем случае).Я предполагаю, что это потому, что изображения загружаются в реальном времени очень долго, учитывая, что это изображения очень хорошего качества, порядка 3-6 МБ каждое.Когда все загружается, кажется, что переход происходит более плавно.

У меня есть следующий код: 

    <!DOCTYPE html>
<HTML lang="en">
<HEAD>
  <TITLE>Troubleshoot</TITLE>
  <META charset="utf-8">
  <SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></SCRIPT>
  <SCRIPT type="text/javascript">
    $(document).ready(function () {
      let imgs = ['joshua-sortino-498896-unsplash.jpg', 'theodor-lundqvist-438530-unsplash.jpg', 'cristian-moscoso-1924-unsplash.jpg', 'nathan-dumlao-576639-unsplash.jpg', 'anthony-delanoix-575672-unsplash.jpg', 'karim-manjra-702188-unsplash.jpg', 'jay-dantinne-499958-unsplash.jpg', 'jeremy-bishop-346050-unsplash.jpg', 'robert-tudor-704838-unsplash.jpg', 'john-towner-126926-unsplash.jpg', 'bady-qb-751603-unsplash.jpg', 'caleb-miller-738108-unsplash.jpg', 'christopher-czermak-705859-unsplash.jpg', 'jonathan-gallegos-727409-unsplash.jpg', 'justin-lane-753659-unsplash.jpg', 'michael-liao-725983-unsplash.jpg', 'raphael-nogueira-559166-unsplash.jpg', 'robin-noguier-572033-unsplash.jpg', 'sorasak-252182-unsplash.jpg', 'usukhbayar-gankhuyag-726907-unsplash.jpg'];
      $(function () {
          let i = 0;
          setInterval(function () {
              i++;
              if (i == imgs.length) {
                  i = 0;
              }
                  $('body').css('background-image', 'url(../images/backgrounds/' + imgs[i] + ')');
          }, 5000);
      });
    });
  </SCRIPT>
  <STYLE>
  body {
      background-image: url('../images/backgrounds/sorasak-252182-unsplash.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      background-size: cover;
      opacity: 1.0;
      transition: background 4s cubic-bezier(0.4, 0, 1, 1);
  }
  </STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Есть ли лучший способ добиться эффекта затухания фона, чем тот, который у меня есть в настоящее времяВот?Любые предложения или советы, чтобы сделать это лучше?Спасибо за тонну!

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Другой параметр - это уникальное изображение со всеми фонами, и вы изменяете диапазон, отображаемый в css, с помощью "#bg {clip: top, right, bottom, left;}".Проблема: ваш bg может долго загружаться.Предварительная загрузка - хорошая идея!Но со всем фоном в одном изображении вы можете любое (или часть) изображение при открытии страницы.Проблема с предварительной загрузкой: с предварительным загрузчиком ваш bg будет отображаться только после загрузки всех изображений!

Решение для проблемы с предварительной загрузкой: вы можете создать массив, который будет контролировать загрузку изображения и изменять изображения между изображениями. 

function nextBg(){
if(this.currentImage < this.arrayLoadedImagens.length)
  this.currentImege++
else
  this.currentImage = 0;
}
0 голосов
/ 27 сентября 2018

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

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();

        img1.src = "http://domain.tld/path/to/image-001.gif";
        img2.src = "http://domain.tld/path/to/image-002.gif";
        img3.src = "http://domain.tld/path/to/image-003.gif";
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);
...