Question

嘿，你们怎么样？我遇到了一个问题 - 我有一个网站，并且有一个名为“mosaicdiv”的div。该div包含带有links-images（）的子div。我希望这些图像和链接在随机时间内从数据库中更改为其他图像和链接。所以，我试图用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个div中的每一个创建15个PeriodicalExecuter实例。无论间隔是什么，这都是225次呼叫！

我不确定你想要完成什么。这个看起来像Apple的专辑艺术屏幕保护程序吗？

自动图像更改

1 个答案: