Javascript更改随机背景图像问题答案

【问题标题】：Javascript Changing Random Background Image IssueJavascript更改随机背景图像问题
【发布时间】：2015-06-15 20:54:44
【问题描述】：

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

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

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

home.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>

【问题讨论】：

标签： javascript html ruby-on-rails ruby-on-rails-4 background-image

【解决方案1】：

我真的不想深入了解您的代码，用两个词表示：无论发生什么，因为您必须等待某些操作完成才能完成（例如动画），并且您永远不希望在其中出现超时间隔。

这一定很有帮助：

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

【讨论】：