不在jQuery中循环

Question

Okay, I just cannot figure this one out. After looking and re-looking at my code for what is probably hours now, I am still not any closer to finding out this strange behavior.

It has to do with the fading of the background and that it is leaving off about 12 of the images that are listed in the array.

The images that are being left off are: bg6, bg36, bg13, bg8, bg14, bg15, bg24, bg29, bg27, bg9, bg19, bg3

Main Code Part 1:

insertLayer();

var bg1 = "#000 url('./images/background/image_1.jpg') no-repeat fixed center center";
var bg2 = "#000 url('./images/background/image_2.jpg') no-repeat fixed center center";
var bg3 = "#000 url('./images/background/image_3.jpg') no-repeat fixed center center";

var bg4 = "#000 url('./images/background/image_4.jpg') no-repeat fixed center center";
var bg5 = "#000 url('./images/background/image_5.jpg') no-repeat fixed center center";
var bg6 = "#000 url('./images/background/image_6.jpg') no-repeat fixed center center";

var bg7 = "#000 url('./images/background/image_7.jpg') no-repeat fixed center center";
var bg8 = "#000 url('./images/background/image_8.jpg') no-repeat fixed center center";
var bg9 = "#000 url('./images/background/image_9.jpg') no-repeat fixed center center";

var bg10 = "#000 url('./images/background/image_10.jpg') no-repeat fixed center center";
var bg11 = "#000 url('./images/background/image_11.jpg') no-repeat fixed center center";
var bg12 = "#000 url('./images/background/image_12.jpg') no-repeat fixed center center";

var bg13 = "#000 url('./images/background/image_13.jpg') no-repeat fixed center center";
var bg14 = "#000 url('./images/background/image_14.jpg') no-repeat fixed center center";
var bg15 = "#000 url('./images/background/image_15.jpg') no-repeat fixed center center";

var bg16 = "#000 url('./images/background/image_16.jpg') no-repeat fixed center center";
var bg17 = "#000 url('./images/background/image_17.jpg') no-repeat fixed center center";
var bg18 = "#000 url('./images/background/image_18.jpg') no-repeat fixed center center";

var bg19 = "#000 url('./images/background/image_19.jpg') no-repeat fixed center center";
var bg20 = "#000 url('./images/background/image_20.jpg') no-repeat fixed center center";
var bg21 = "#000 url('./images/background/image_21.jpg') no-repeat fixed center center";

var bg22 = "#000 url('./images/background/image_22.jpg') no-repeat fixed center center";
var bg23 = "#000 url('./images/background/image_23.jpg') no-repeat fixed center center";
var bg24 = "#000 url('./images/background/image_24.jpg') no-repeat fixed center center";

var bg25 = "#000 url('./images/background/image_25.jpg') no-repeat fixed center center";
var bg26 = "#000 url('./images/background/image_26.jpg') no-repeat fixed center center";
var bg27 = "#000 url('./images/background/image_27.jpg') no-repeat fixed center center";

var bg28 = "#000 url('./images/background/image_28.jpg') no-repeat fixed center center";
var bg29 = "#000 url('./images/background/image_29.jpg') no-repeat fixed center center";
var bg30 = "#000 url('./images/background/image_30.jpg') no-repeat fixed center center";

var bg31 = "#000 url('./images/background/image_31.jpg') no-repeat fixed center center";
var bg32 = "#000 url('./images/background/image_32.jpg') no-repeat fixed center center";
var bg33 = "#000 url('./images/background/image_33.jpg') no-repeat fixed center center";

var bg34 = "#000 url('./images/background/image_34.jpg') no-repeat fixed center center";
var bg35 = "#000 url('./images/background/image_35.jpg') no-repeat fixed center center";
var bg36 = "#000 url('./images/background/image_36.jpg') no-repeat fixed center center";

var bg37 = "#000 url('./images/background/image_37.jpg') no-repeat fixed center center";
var bg38 = "#000 url('./images/background/image_38.jpg') no-repeat fixed center center";
var bg39 = "#000 url('./images/background/image_39.jpg') no-repeat fixed center center";

var bg40 = "#000 url('./images/background/image_40.jpg') no-repeat fixed center center";
var bg41 = "#000 url('./images/background/image_41.jpg') no-repeat fixed center center";

 var images = [bg30, bg34, bg6, bg7, bg10, bg36, bg33, bg26, bg14, bg5, bg40, bg13, bg16, bg23, bg8, bg18, bg32, bg14, bg31, bg15, bg24, bg20, bg22, bg29, bg37, bg41, bg27, bg25, bg12, bg9, bg4, bg21, bg19, bg1, bg28, bg3, bg2, bg39, bg38];

var current = 0;

for (var a = 0; a < 39; a++)
{
 $('#fade1').fadeOut(16000, function()
 {
  $('#fade1').css("background", images[current]);
  current++;
 });

 if (current > 38)
 {
  current = 0;
 }

 $('#fade1').fadeIn(16000, function()
 {
  $('#background').css("background", images[current]);
  current++;
 });

 if (current > 38)
 {
  current = 0;
 }

 $('#fade1').fadeOut(16000, function()
 {
  $('#fade1').css("background", images[current]);
  current++;
 });

 if (current > 38)
 {
  current = 0;
 }
}

Main Code Part 2:

var backgroundFader = function(element, bgClasses, nextChange) 

{
 this.cssProps = {'position' : 'relative', 'z-index' : 100};
 this.bgs   = ['bg1', 'bg2', 'bg3', 'bg4', 'bg5', 'bg6', 'bg7', 'bg8', 'bg9', 'bg10', 'bg11', 'bg12', 'bg13', 'bg14', 'bg15', 'bg16', 'bg17', 'bg18', 'bg19', 'bg20', 'bg21', 'bg22', 'bg23', 'bg24', 'bg25', 'bg26', 'bg27', 'bg28', 'bg29', 'bg30', 'bg31', 'bg32', 'bg33', 'bg34', 'bg35', 'bg36', 'bg37', 'bg38', 'bg39', 'bg40', 'bg41'];

 this.element  = element || ".bg_fader";
};

function insertLayer(element)
{
 var cssProps = {'position' : 'relative', 'z-index' : 100};
 var bgs   = ['bg1', 'bg2', 'bg3', 'bg4', 'bg5', 'bg6', 'bg7', 'bg8', 'bg9', 'bg10', 'bg11', 'bg12', 'bg13', 'bg14', 'bg15', 'bg16', 'bg17', 'bg18', 'bg19', 'bg20', 'bg21', 'bg22', 'bg23', 'bg24', 'bg25', 'bg26', 'bg27', 'bg28', 'bg29', 'bg30', 'bg31', 'bg32', 'bg33', 'bg34', 'bg35', 'bg36', 'bg37', 'bg38', 'bg39', 'bg40', 'bg41'];

 var element  = element || ".bg_fader";

 var layerel = element.substr(1) + "-layer";
 if(jQuery("#"+layerel).length == 0)
 {
  jQuery("<div id='"+layerel+"'></div>")
  .insertAfter(element)
  .nextAll().appendTo("#"+layerel)
  .parent().css(cssProps);
 }
}

Thanks for any help!

Answer 1

First of all, you can rewrite that code to be about 7 times smaller. use loops and stuff.

On to your problem:

I suspect it has something to do with you having an infinite loop, that, sets of a bunch of timers that fade some stuff. because you are constantly looping and creating more and more timers, you will have unpredictable results, such as some images not being used.

I suspect that you dont understand how fadeOut and fadeIn works. Those calls queue up animations, they do not block execution! So in effect you are queuing up a ton of stuff all the time, all the time .

Also, you should look into using firebug to debug

Answer 2

You might want to look into a jQuery plugin to get this effect; there are plenty of "slideshow"-style plugins out there. See Cycle , for example.

Answer 3

Gonna have to side with mkoryak on this. Code is way over-complicating the issue.

This is how I would do it (this, of course, is totally untested):

var fade_time = 1000;
var wait_time = 15000;
var curr = 0;
var last = 41;
var bg = $("#background");

function do_fade() {
    curr++;
    if (curr > last) {
        curr = 1;
    }
    bg.fadeOut( fade_time, function() {
        // switch your image here. something like this
        bg.css('background-image','./images/background/image_' + curr + '.jpg');
        bg.fadeIn( fade_time );
    }
}

id = setInterval( do_fade, wait_time );

Hopefully this works for you.

Answer 4

Just thought I'd mention this snippet. Should work the same on background images as it does on regular images. If you have a lot of images I wouldn't preload all of them on page load thought, instead use some queue system.

<script type="text/javascript">
        <?
        $i = 0;
        if ($handle = opendir('./images/background')) {
            while (false !== ($file = readdir($handle))) {
                if ($file != "." && $file != "..") {
                    echo "preloadimage_".$i." = new Image();\n\t";
                    echo "preloadimage_".$i++.".src = \"/images/background/".$file."\";\n\t";
                }
            }
            closedir($handle);
        }
        ?>
    </script>