HTML背景图片闪烁答案

【问题标题】：HTML background image flashingHTML背景图片闪烁
【发布时间】：2018-09-27 04:56:25
【问题描述】：

我正在尝试创建一个网站，登录页面的背景将包含一系列 10 张左右的图像，这些图像每隔几秒钟就会逐渐淡入和淡出。出于某种原因，当图像发生变化时，会出现短暂的瞬间，我注意到背景颜色（在我的情况下为白色）闪烁。我假设这是因为图像需要很长时间才能实时加载，因为这些图像质量非常好，每个图像大约 3-6 MB。当一切都完成加载后，它似乎过渡更顺利。

我有以下代码：

    <!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>

有没有比我目前拥有的更好的方法来实现这种背景褪色效果？有什么建议或提示可以使这更好吗？非常感谢！

【问题讨论】：

标签： jquery html css background-image fading

【解决方案1】：

您可以预加载图像，以便它们在最终需要过渡时准备就绪。

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);

【讨论】：

【解决方案2】：

其他选项是具有所有背景的唯一图像，您可以使用“#bg{clip: top, right, bottom, left;}”更改显示在 css 中的范围。问题：你的 bg 可以有很长时间的负载。预载是个好主意！但是在一个图像中的所有背景，当您打开页面时，您可以使用任何（或部分）图像。预加载问题：使用预加载器，您的 bg 将仅在加载所有图像后显示！

预加载问题的解决方案：您可以使用一个数组来控制图像如何加载并更改 btw 图像。

function nextBg(){
if(this.currentImage < this.arrayLoadedImagens.length)
  this.currentImege++
else
  this.currentImage = 0;
}

【讨论】：