Javascript更改随机背景图像问题

Javascript Changing Random Background Image Issue

本文关键字：图像 问题 背景 随机 Javascript      更新时间：2023-09-26

我在Rails 4上，终于让这个JavaScript工作了。它每 10 秒随机更改一次背景图像，并具有淡入淡出效果。

唯一的问题是每隔一段时间，图像只会加载一半......然后它会开始闪烁并变得疯狂。它将继续不规则地从一张图片闪烁到另一张图片，直到我刷新页面。

有谁知道为什么会这样？也许写得不好的javascript？我所有的照片都位于公共/资产中。

首页.html.erb： 

<div id="imageDiv" class="imageContainer"></div>
  <script>
    var myImages = new Array("sushi.jpg", "pizza.jpg", "steak.jpg", "greens.jpg", "pancakes.jpg", "redbull.jpg", "coffeepow.jpg", "frenchfries.jpg", "tabs.jpg", "cigarettes.jpg", "noodles.jpg", "jelly.jpg", "pills2.jpg", "pills3.jpg", "gator.jpg", "needle.jpg", "tv.jpg", "cantop.jpg", "spices.jpg", "sliders.jpg", "fishoil.jpg", "chips.jpg", "cherries.jpg", "ciglighter.jpg", "eggs.jpg", "bakingsoda.jpg", "pasta.jpg", "beer.jpg", "champagne.jpg", "peppers.jpg");
    $(document).ready(function() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];
        random = 'url(assets/' + random + ')';
        $('#imageDiv').css('background-image', random);
        setInterval(function() {
            SetImage();
        }, 10000);
    });
    function SetImage() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];
        random = 'url(assets/' + random + ')';
        $('#imageDiv').fadeOut(900);
        setTimeout(function () {
            $('#imageDiv').css('background-image', random);
            $('#imageDiv').fadeIn(900);
        }, 900);
    }
  </script>

我真的不想深入了解你的代码，用两个词来说：无论发生什么，都在发生，因为你必须等待一些动作完成才能完成（例如动画），并且你永远不希望在间隔内超时。

这必须有帮助：

var images = ["http://i.imgur.com/xYDljlP.jpg",
          "http://i.imgur.com/f9MgLTO.jpg",
          "http://i.imgur.com/ECM9LKl.jpg"];

function setBackground() {
    var rand = Math.floor(Math.random() * images.length);
    $( "#imageDiv" ).fadeOut(300, function() {
      $( "#imageDiv" ).css("background", "url( " + images[rand] + " )");
      $( "#imageDiv" ).fadeIn(300, function() {
         setTimeout(setBackground, 3000);
      });
    });
}
setBackground();

请看小提琴：jsfiddle

相关文章：