Tickerscript needs preloading of images

[leonschroder]

1) Script Title:
DHTML Ticker script
2) Script URL (on DD):

3) Describe problem:
I have a huge list (1678) of small (2kB) images to rotate through the tickerscript. Brady has helped me with the random start to the script. Since I don't want to preload all images I would like to just preload the ones ahead of the starting one. So, for instance, the script starts on image 235 then I would like to preload 236 and stay ahead each time. Here's the script (I haven't added the 1678 image lines yet....:

// JavaScript Document
/*Message arrays for the two scrollers*/

var tickercontent=new Array()
tickercontent[0]='1'
tickercontent[1]="2"
tickercontent[2]='3'
tickercontent[3]='4'
tickercontent[4]='<img src="Images/Namen/0004.jpg" width="28" height="235">'
tickercontent[5]='<img src="Images/Namen/0005.jpg" width="28" height="235">'
tickercontent[6]='<img src="Images/Namen/0006.jpg" width="28" height="235">'
tickercontent[7]='<img src="Images/Namen/0007.jpg" width="28" height="235">'
tickercontent[8]='<img src="Images/Namen/0008.jpg" width="28" height="235">'
tickercontent[9]='<img src="Images/Namen/0009.jpg" width="28" height="235">'
tickercontent[10]='<img src="Images/Namen/0010.jpg" width="28" height="235">'

//etc.etc

var tickercontent2=new Array()
tickercontent2[0]='<img src="Images/Namen/1000.jpg" width="21" height="235">'
tickercontent2[1]='<img src="Images/Namen/1001.jpg" width="21" height="235">'
tickercontent2[2]='<img src="Images/Namen/1002.jpg" width="21" height="235">'
//etc.etc

/***********************************************
* DHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* new domticker(tickercontent2, "domticker2", "someclass", 2200)
***********************************************/
function domticker(content, divId, divClass, delay, fadeornot){
var ran=Math.floor(Math.random()*content.length);
while(ran > 0){
content.push(content.shift());
ran--;
}
this.content = content;
this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pointer=1
this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filterrogidXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1" : ""
if (this.opacitystring!="") this.delay+=1000 //add 1/2 sec to account for fade effect, if enabled
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
var instanceOfTicker=this
setTimeout(function(){instanceOfTicker.initialize()}, delay)
}

domticker.prototype.initialize=function(){
var instanceOfTicker=this
this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
this.rotatemsg()
}

domticker.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
else{
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
}
}

// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------

domticker.prototype.fadetransition=function(fadetype, timerid){
var contentdiv=this.contentdiv
if (fadetype=="reset")
this.opacitysetting=0.2
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=this.opacitysetting
}
else
this.opacitysetting=0
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}

[blm126]

Hmm...This is untested

// JavaScript Document
/*Message arrays for the two scrollers*/

var tickercontent=new Array()
tickercontent[0]='1'
tickercontent[1]="2"
tickercontent[2]='3'
tickercontent[3]='4'
tickercontent[4]='<img src="Images/Namen/0004.jpg" width="28" height="235">'
tickercontent[5]='<img src="Images/Namen/0005.jpg" width="28" height="235">'
tickercontent[6]='<img src="Images/Namen/0006.jpg" width="28" height="235">'
tickercontent[7]='<img src="Images/Namen/0007.jpg" width="28" height="235">'
tickercontent[8]='<img src="Images/Namen/0008.jpg" width="28" height="235">'
tickercontent[9]='<img src="Images/Namen/0009.jpg" width="28" height="235">'
tickercontent[10]='<img src="Images/Namen/0010.jpg" width="28" height="235">'

//etc.etc

var tickercontent2=new Array()
tickercontent2[0]='<img src="Images/Namen/1000.jpg" width="21" height="235">'
tickercontent2[1]='<img src="Images/Namen/1001.jpg" width="21" height="235">'
tickercontent2[2]='<img src="Images/Namen/1002.jpg" width="21" height="235">'
//etc.etc

/***********************************************
* DHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* new domticker(tickercontent2, "domticker2", "someclass", 2200)
***********************************************/
function domticker(content, divId, divClass, delay, fadeornot){
var ran=Math.floor(Math.random()*content.length);
while(ran > 0){
content.push(content.shift());
ran--;
}
this.content = content;
this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pointer=1
this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filterrogidXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1" : ""
if (this.opacitystring!="") this.delay+=1000 //add 1/2 sec to account for fade effect, if enabled
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
var instanceOfTicker=this
setTimeout(function(){instanceOfTicker.initialize()}, delay)
}

domticker.prototype.initialize=function(){
var instanceOfTicker=this
this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
this.rotatemsg()
}

domticker.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
else{
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
var split = this.pointer.split('"');
if(split.length > 0){
var image = new Image();
image.src = split[1];
}
setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
}
}

// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------

domticker.prototype.fadetransition=function(fadetype, timerid){
var contentdiv=this.contentdiv
if (fadetype=="reset")
this.opacitysetting=0.2
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=this.opacitysetting
}
else
this.opacitysetting=0
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}

That was written very quickly, by the way.

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[leonschroder]

Hi again,

Unfortunately that didn't work. The 'function or method does not support that object'. Error in Line 67.
This is my testsite by the way. You can see the problem on the right of the image: http://www.joodskindermonument.nl/bouw1ihtml.html

Leon

[blm126]

Try this(I didn't test this one either)

// JavaScript Document
/*Message arrays for the two scrollers*/

var tickercontent=new Array()
tickercontent[0]='1'
tickercontent[1]="2"
tickercontent[2]='3'
tickercontent[3]='4'
tickercontent[4]='<img src="Images/Namen/0004.jpg" width="28" height="235">'
tickercontent[5]='<img src="Images/Namen/0005.jpg" width="28" height="235">'
tickercontent[6]='<img src="Images/Namen/0006.jpg" width="28" height="235">'
tickercontent[7]='<img src="Images/Namen/0007.jpg" width="28" height="235">'
tickercontent[8]='<img src="Images/Namen/0008.jpg" width="28" height="235">'
tickercontent[9]='<img src="Images/Namen/0009.jpg" width="28" height="235">'
tickercontent[10]='<img src="Images/Namen/0010.jpg" width="28" height="235">'

//etc.etc

var tickercontent2=new Array()
tickercontent2[0]='<img src="Images/Namen/1000.jpg" width="21" height="235">'
tickercontent2[1]='<img src="Images/Namen/1001.jpg" width="21" height="235">'
tickercontent2[2]='<img src="Images/Namen/1002.jpg" width="21" height="235">'
//etc.etc

/***********************************************
* DHTML Ticker script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* new domticker(tickercontent2, "domticker2", "someclass", 2200)
***********************************************/
function domticker(content, divId, divClass, delay, fadeornot){
var ran=Math.floor(Math.random()*content.length);
while(ran > 0){
content.push(content.shift());
ran--;
}
this.content = content;
this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pointer=1
this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filterrogidXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1" : ""
if (this.opacitystring!="") this.delay+=1000 //add 1/2 sec to account for fade effect, if enabled
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
var instanceOfTicker=this
setTimeout(function(){instanceOfTicker.initialize()}, delay)
}

domticker.prototype.initialize=function(){
var instanceOfTicker=this
this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
this.rotatemsg()
}

domticker.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
else{
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
var split = this.content[this.pointer].split('"');
if(split.length > 0){
var image = new Image();
image.src = split[1];
}
setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
}
}

// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------

domticker.prototype.fadetransition=function(fadetype, timerid){
var contentdiv=this.contentdiv
if (fadetype=="reset")
this.opacitysetting=0.2
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=this.opacitysetting
}
else
this.opacitysetting=0
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}

[leonschroder]

Hi Brady,

The script is error free and I tried it on the few images that were there and that worked great. Now that I have made one of the two array the proper size (890 elements) unfortunately I see the white space before the image loads: http://www.joodskindermonument.nl/bouw1ihtml.html
Maybe you could help me again?

Leon

[blm126]

In your arrays the src attribute image (where you put the address) needs to be in double quotes. So

tickercontent[0]="<img src='Images/Namen/0001.jpg' width='28' height='235'>"

needs to be

tickercontent[0]='<img src="Images/Namen/0001.jpg" width="28" height="235">'

[leonschroder]

Yes, almost there!
I had changed the " around because I made the array in Excel and thought it wouls be the same as long as it was done consistently. For some reason or another the second image on the page is too slow (so I see a white space first). The rest is fine now! What could that be?

[blm126]

Well, I really don't know. With all these additions I don't understand why you are using this script instead of an image slide show script.

[leonschroder]

I like this script because of the fact you can pause the slideshow (on mousover), the random start (just the start) and the preloading.
This site is about the 1692 children that were deported and killed during wwII from around a certain square in The Hague. So I want it to start at random (so that every child might be first) and then contine so that brothers and sisters are listed together.... Rather grim eh.
Thanks for all your help!