改变随机背景图像问题的Javascript [英] Javascript Changing Random Background Image Issue

问题描述

我在Rails 4上，终于得到了这个javascript的工作。它随机更改随着淡入淡出效果每10秒更改一次背景图像。

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

有人知道为什么会发生这种情况吗？也许写得不好的JavaScript？所有我的照片都位于公共/资产中。

home.html.erb：

 < div id =imageDivclass =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）; 
 $ b $（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）; 
}）; 
 
函数SetImage（）{
 var random = myImages [Math.floor（Math.random（）* myImages.length）]; 
 
 random ='url（assets /'+ random +'）'; 
 $（'＃imageDiv'）。fadeOut（900）; 
 $ b 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]; 
 
 
函数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

I am on Rails 4, and finally got this javascript working. It changes randomly changes the background image every 10 seconds with a fadein fadeout effect.

The only issue is every so often, an image will only load halfway... then it will start to flash and and get crazy. It will continue to erratically flash from picture to picture until i refresh the page.

Does anyone know why this is happening? Maybe poorly written javascript? All of my pictures are located in 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>

解决方案

I don't really want to get deep into your code, in two words: whatever is happening is happening because you have to wait for some actions to complete before they complete (such as animations) and you never want have timeouts within intervals.

This has to be helpful:

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

Please see the fiddle: jsfiddle

这篇关于改变随机背景图像问题的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！