Авто img change

Question

Hew, как дела? Я столкнулся с проблемой - у меня есть сайт, и есть div, который называется "mosaicdiv". Этот div содержит sub-div с links-images (). Я хочу, чтобы эти изображения и ссылки менялись в случайное время на другие из базы данных. Итак, я попытался сделать это с помощью ajax:

<?  $fdata = DisplayFeaturedMembers(15); ?>
    <div id="mosaicdiv" style="width:70%; height: 330px; float:left;">
    <div id="1" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[1]['username']).", ".$fdata[1]['age'].", ".$fdata[1]['country']."<br />".ucfirst($fdata[1]['headline']); ?>" href="<?=$fdata[1]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[1]['image']; ?>"/></a></div></div>
    <div id="2" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[2]['username']).", ".$fdata[2]['age'].", ".$fdata[2]['country']."<br />".ucfirst($fdata[2]['headline']); ?>" href="<?=$fdata[2]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[2]['image']; ?>"/></a></div></div>
    <div id="3" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[3]['username']).", ".$fdata[3]['age'].", ".$fdata[3]['country']."<br />".ucfirst($fdata[3]['headline']); ?>" href="<?=$fdata[3]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[3]['image']; ?>"/></a></div></div>
    <div id="4" style="position:relative; width:100px; height:100px; left:200px; float:left;"><div><a title="<?=ucfirst($fdata[4]['username']).", ".$fdata[4]['age'].", ".$fdata[4]['country']."<br />".ucfirst($fdata[4]['headline']); ?>" href="<?=$fdata[4]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[4]['image']; ?>"/></a></div></div>

    <div id="5" style="position:relative; width:100px; height:100px; left:100px; float:left;clear:both;"><div><a title="<?=ucfirst($fdata[5]['username']).", ".$fdata[5]['age'].", ".$fdata[5]['country']."<br />".ucfirst($fdata[5]['headline']); ?>" href="<?=$fdata[5]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[5]['image']; ?>"/></a></div></div>
    <div id="6" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[6]['username']).", ".$fdata[6]['age'].", ".$fdata[6]['country']."<br />".ucfirst($fdata[6]['headline']); ?>" href="<?=$fdata[6]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[6]['image']; ?>"/></a></div></div>
    <div id="7" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[7]['username']).", ".$fdata[7]['age'].", ".$fdata[7]['country']."<br />".ucfirst($fdata[7]['headline']); ?>" href="<?=$fdata[7]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[7]['image']; ?>"/></a></div></div>
    <div id="8" style="position:relative; width:100px; height:100px; left:200px; float:left;"><div><a title="<?=ucfirst($fdata[8]['username']).", ".$fdata[8]['age'].", ".$fdata[8]['country']."<br />".ucfirst($fdata[8]['headline']); ?>" href="<?=$fdata[8]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[8]['image']; ?>"/></a></div></div>

    <div id="9" style="position:relative; width:100px; height:100px; left:0px; float:left;clear:both;"><div><a title="<?=ucfirst($fdata[9]['username']).", ".$fdata[9]['age'].", ".$fdata[9]['country']."<br />".ucfirst($fdata[9]['headline']); ?>" href="<?=$fdata[9]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[9]['image']; ?>"/></a></div></div>
    <div id="10" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[10]['username']).", ".$fdata[10]['age'].", ".$fdata[10]['country']."<br />".ucfirst($fdata[10]['headline']); ?>" href="<?=$fdata[10]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[10]['image']; ?>"/></a></div></div>
    <div id="11" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[11]['username']).", ".$fdata[11]['age'].", ".$fdata[11]['country']."<br />".ucfirst($fdata[11]['headline']); ?>" href="<?=$fdata[11]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[11]['image']; ?>"/></a></div></div>
    <div id="12" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[12]['username']).", ".$fdata[12]['age'].", ".$fdata[12]['country']."<br />".ucfirst($fdata[12]['headline']); ?>" href="<?=$fdata[12]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[12]['image']; ?>"/></a></div></div>
    <div id="13" style="position:relative; width:100px; height:100px; left:200px; float:left;"><div><a title="<?=ucfirst($fdata[13]['username']).", ".$fdata[13]['age'].", ".$fdata[13]['country']."<br />".ucfirst($fdata[13]['headline']); ?>" href="<?=$fdata[13]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[13]['image']; ?>"/></a></div></div>

    <div id="14" style="position:relative; width:100px; height:100px; left:300px; float:left;clear:both;"><div><a title="<?=ucfirst($fdata[14]['username']).", ".$fdata[14]['age'].", ".$fdata[14]['country']."<br />".ucfirst($fdata[14]['headline']); ?>" href="<?=$fdata[14]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[14]['image']; ?>"/></a></div></div>
    <div id="15" style="position:relative; width:100px; height:100px; left:400px; float:left;"><div><a title="<?=ucfirst($fdata[15]['username']).", ".$fdata[15]['age'].", ".$fdata[15]['country']."<br />".ucfirst($fdata[15]['headline']); ?>" href="<?=$fdata[15]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[15]['image']; ?>"/></a></div></div>
    </div>

        function getRandomInt(min, max)
            {
              return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            function startAnim(idn) {
                var interval = idn*1;
                interval += 5;
                interval += getRandomInt(5,60);
                $$("#mosaicdiv #"+idn+" div").each( function(id) {
                    new PeriodicalExecuter( function(pe) {
                        new Effect.Fade(id,{duration:1.5, afterFinish: function(){
                                var oOptions = { onSuccess: function(oXHR, oJson){
                                        new Effect.Appear(id,{duration:2.5});
                                        $$("#mosaicdiv #"+idn+" div a").each( function(link) {
                                            new Tooltip(link, {mouseFollow: true});
                                        });
                                    }};
                                new Ajax.Updater(id,'index.php?act=grpic',oOptions);
                            }});
                    }, interval);
                });
            }

            var i;
            for(i=1;i<16;i++)
                startAnim(i);

//index.php?act=grpic
if($_GET['act']==="grpic") {
            $ar = DisplayFeaturedMembers(1);
            $img = $ar[1]['image'];
            $link = $ar[1]['link'];
            $title = ucfirst($ar[1]['username']).", ".$ar[1]['age'].", ".$ar[1]['country']."<br />".ucfirst($ar[1]['headline']);
            echo "<a title=\"$title\" href=\"$link\"><img width=\"100px\" height=\"100px\" src=\"$img\"/></a>";
            return;
        }

Это работает, но процент загрузки сервера немедленно возрастает. Что не так с кодом выше? Или я должен составить массив js и разобраться с ним? Если да, можете ли вы предоставить немного кода?

Большое спасибо!

Answer 1

Это выглядит сложнее, чем нужно. Я не настолько знаком с prototype.js, который, как я полагаю, и используется вами. Но, глядя на документацию для PeriodicalExecuter , это обертка вокруг setInterval. Я думаю, вы могли бы неправильно понять это для setTimeout. setInterval не останавливается, он продолжает работать, пока вы не очистите его.

Вы создаете 15 экземпляров PeriodicalExecuter для каждого из 15 делений. Это 225 вызовов за любой интервал!

Я не совсем уверен, чего вы пытаетесь достичь. Это что-то похожее на заставку Apple для обложки альбомов?