Question

我正在尝试创建一个网站，并且登录页面的背景将包含一系列大约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>

有没有比我目前在这里实现背景衰落效果更好的方法了？有什么建议或提示可以改善这一点吗？多谢！

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

Answer 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;
}

HTML背景图片闪烁

2 个答案: