Extra images load on click

[Zyenet]

I have a code, pasted below, that displays a set amount of affiliates on the page, and all can be viewed by clicking View All.
But it makes the page load slower.
Is there a way to make those extra images only load if someone clicks view all?

Note to any affiliates, that's just an old code.

 

[spyka]

You probably won't notice that much difference, however:

From the above code, take:

for(a=0;a<affiliates.length;a  ){
document.getElementById("atable").innerHTML  = '<a href="' affiliates[a][0] '"><img src="' affiliates[a][1] '" border="0"></a> ';
}

And paste it to the where I've inserted %HERE% in the code above:

function hideshow(id){
if(document.getElementById(id).style.display==""){
document.getElementById(id).style.display="none";
} else {
 document.getElementById(id).style.display="";
for(a=0;a<affiliates.length;a  ){
document.getElementById("atable").innerHTML  = '<a href="' affiliates[a][0] '"><img src="' affiliates[a][1] '" border="0"></a> ';
}
}
}

So, overall the script below the do not edit line looks like this:

Of course this is assuming the function hideshow() isn't used for anything else

 

[Zyenet]

Doesn't work. Nothing shows up. ~neutral~

Here's my code:

 

[spyka]

This works 🙂 (just tested it on localhost)

Javascript (in header or file)

<script type="text/javascript">
<!--
/*
si.Random Affiliate Table v1 - By Smangii
http://smangii.proboards78.com
Do Not Repost or Remove This Header
*/

// Edit how many affiliates you want shown by default
var show = 4;

// Insert your affiliates below
var affiliates = [
['http://forumpromotion.net/','http://i14.servimg.com/u/f14/10/07/61/78/th/fpaffi12.png'],
['http://z4.invisionfree.com/Public_Promotions','http://i9.tinypic.com/53sfpth.jpg'],
['http://thenintendogamers.net','http://i104.photobucket.com/albums/m173/prise_fightr/us_outline-3.jpg'],
['http://awesomeaxing.createforum.net','http://i84.photobucket.com/albums/k19/jake30502/axingaffiliate.png'],
['http://usersunion.freeforums.org','http://img119.imageshack.us/img119/429/usersunion452bt6.gif'],
['http://z11.invisionfree.com/Hype_snipe/index.php?act=idx','http://img153.imageshack.us/img153/9008/hypersnipersg6.gif'],
['http://www.cyberatoll.com','http://i194.photobucket.com/albums/z148/knaphih/abutton.gif'],
['http://topgear.real-host.uni.cc/forum','http://img131.imageshack.us/img131/2074/affiliatedv1.png'],
['http://www.psrv.co.nr/','http://img128.imageshack.us/img128/5469/psrv2bq1.gif'],
['http://nintendo.freeforums.org/','http://i104.photobucket.com/albums/m197/phoebus91587/links/nintendo_blink.gif'],
['http://mach1.phphope.com/','http://i152.photobucket.com/albums/s162/spikesx/cdf.png'],
['http://promote4free.net/','http://i238.photobucket.com/albums/ff176/HUKD/P4F2.jpg'],
['http://z3.invisionfree.com/Semiotic','http://i148.photobucket.com/albums/s21/buriedah_daniel/semioticszrequest250.jpg'],
['http://onlinegaming.myfreeforum.org','http://gallery.myff.org/gallery/197037/gamingforum2br1.gif'],
['http://formula1.real-host.uni.cc/','http://i221.photobucket.com/albums/dd246/f199/f1forumbutton.jpg'],
['http://www.fasteditors.com','http://img84.imageshack.us/img84/6553/affiliatebuttonkk2.jpg'],
['http://www.hiddenhaven.co.uk','http://www.hiddenhaven.co.uk/external/pr/i.php/ODh4MzFh/hhfCreateImage.png'],
];



function random_affs() {
	for(i=0;i<show;i++){
		var randNumber = Math.floor(Math.random()*affiliates.length);
		document.getElementById("artable").innerHTML += '<a href="'+affiliates[randNumber][0]+'"><img src="'+affiliates[randNumber][1]+'" border="0" /></a> ';
		affiliates.splice(randNumber, 1);
	}
}

function show_all(){
	if(document.getElementById('atable').style.display==""){
		document.getElementById('atable').style.display="none";
	} else {
		document.getElementById('atable').style.display="";
		for(a=0;a<affiliates.length;a++){
			document.getElementById("atable").innerHTML += '<a href="'+affiliates[a][0]+'"><img src="'+affiliates[a][1]+'" border="0"></a> ';
		}
	}
}

//-->
</script>

Then this html for your random affiliates table:

<div id="artable">
<script>
random_affs();
</script>
</div>

And the all affiliates table:

<a href="javascript:show_all();">View all</a>
<div id="atable" style="display:none;">
</div>

Can be pasted anywhere on page. Should all work!
The 'all affiliates' images won't load until the first time view all is clicked

 

[Zyenet]

I'm a bit of a dummy with this, so could I just get this all in one piece of code?

 

[spyka]

Well, where your current code is, remove it and paste this:


Then wherever you want to show the random affiliates and the 'view all' link in your template file paste this:

<div id="artable">
<script>
random_affs();
</script>
</div>:
<a href="javascript:show_all();">View all</a>
<div id="atable" style="display:none;">
</div>

 

[Zyenet]

Look at my forum, it's not working the way I want.
Also, when you click view all, it lists each image three times, not including the images shown without viewall.

 

[CyberFreak]

It shows each image once when i click view all. Also there is no point showing the images that were randomly selected to show by default a second time when you click view all as they still show above.

 

[Zyenet]

Ah, yes, now It works correctly.
Now all I need is the stuff to stay inside the affiliate box and I'll be set. ~cheesey_grin~