Auto img change
Hew, how r y'all? I ran into a problem - I've a site and there's a div called "mosaicdiv". That div contains sub-divs with links-images(). I want those images and links to change themselves in random time to other ones from the database. So, I tried to get it done with 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;
}
It works, but the server load percent rises up immediately. What's wrong with the code above? Or should I make up the js array and deal with it? If so, can you provide a lil bit of code?
Thank you so much!
This looks more complex than it needs to be. I am not that familiar with prototype.js, which I assume is what you are using. But looking at the documentation for PeriodicalExecuter, it's a wrapper around setInterval. I think you might misunderstood it for setTimeout. setInterval does not stop, it keeps going and going until you clear it.
You are creating 15 instances of PeriodicalExecuter for each of the 15 divs. That's 225 calls per whatever the interval is!
I am not really sure what you are trying to accomplish. Is this something that look like Apple's album art screensaver?
精彩评论