can anyone pls help me.
I'm having one portfolio section. And all images are showing one by one with fade effect. it is loading all images and showing images one by one. My problem is there are around 400 images in portfolio section. and it will be too heavy to load page.
So now I want it should load 1st image and show, then 2nd image and show and so on... so that page loads fast.
Code is below .js, css & html
/* Javascript */
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init)
var d=document,imgs=new Array(),zInterval=null,current=0,pause=false
function so_init(){
if(!d.getElementById || !d.createElement)return
css=d.createElement('link')
d.getElementsByTagName('head')[0].appendChild(css)
imgs=d.getElementById('rotator').getElementsByTagName('img')
for(i=1;i<imgs.length;i++)imgs[i].xOpacity=0
imgs[0].style.display='block'
imgs[0].xOpacity=.99
setTimeout(so_xfade,2000)}
function so_xfade(){
cOpacity=imgs[current].xOpacity
nIndex=imgs[current+1]?current+1:0
nOpacity=imgs[nIndex].xOpacity
cOpacity-=.05
nOpacity+=.05
imgs[nIndex].style.display='block'
imgs[current].xOpacity=cOpacity
imgs[nIndex].xOpacity=nOpacity
setOpacity(imgs[current])
setOpacity(imgs[nIndex])
if(cOpacity<=0){
imgs[current].style.display='none'
current=nIndex
setTimeout(so_xfade,3000)}
else{
setTimeout(so_xfade,50)}
function setOpacity(obj){
if(obj.xOpacity>.99){
obj.xOpacity=.99
return}
obj.style.opacity=obj.xOpacity
obj.style.MozOpacity=obj.xOpacity
obj.style.filter='alpha(opacity='+(obj.xOpacity*100)+')'}}
<style type="text/css">
#rotator{cursor: pointer;overflow: hidden;margin: 0 auto;position: relative;width: 125px; height: 120px;}
#rotator img{border: 0; cursor: pointer; width: 125px; height: 120px;}
</style>
<div id="rotator">
<a href="http://www.mojopages.com" target="_blank"><img src="images/mojopages.gif" title="mojopages" /></a>
<a href="http://www.vois.com" target="_blank"><img src="images/vois.gif" title="CSS vois" /></a>
<a href="http://www.domonow.com" target="_blank"><img src="images/domonow.gif" title="domonow" /></a>
<a href="http://www.simplymobilemoms.com" target="_blank"><img src="images/simplymobilemoms.gif" title="simply mobile moms" /></a>
<a href="http://www.twinzer.com" target="_blank"><img src="images/twinzer.gif" title="twinzer" /></a>
<a href="http://www.tabtab.com" target="_blank"><img src="images/tabtab.gif" title="tabtab" /></a>
<a href="http://www.mojizu.com" target="_blank"><img src="images/mojizu.gif" title="mojizu" /></a>
<a href="http://www.gagla.com" target="_blank"><img src="images/gagla.gif" title="gagla" /></a>
<a href="http://www.metrowize.com" target="_blank"><img src="images/metrowize.gif" title="metrowize" /></a>
<a href="http://www.mytrade.com" target="_blank"><img src="images/mytrade.gif" title="mytrade" /></a>
<a href="http://www.nauna.com" target="_blank"><img src="images/nauna.gif" title="nauna" /></a>
</div>
