Javascript 更改随机背景图像问题

Question

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

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

有谁知道为什么会这样？也许写得不好javascript？我所有的图片都位于 public/assets.

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>

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

请参阅fiddle：jsfiddle

Javascript 更改随机背景图像问题

Javascript Changing Random Background Image Issue

html

javascript

ruby-on-rails

background-image

ruby-on-rails-4