Ultimate fade in slideshow makes some pc's cpu bound

[Glen_S]

1) Script Title:
Ultimate fade in slideshow
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm
3) Describe problem:

I am using this script on a page I am building to cycle through 36 images in 5 separate slideshows, one in a 800x200 div box and four others in side by side 200x150 div boxes. The images are all 45k or less in size.

I notice when testing this page on different machines, that one machine becomes CPU bound when this page is loaded, to the point that the CSS flyout menus I have on the same page are VERY slow to react. The machine is an older P3 1Ghz machine with 512 meg RAM. This does not seem to be an issue on any other machines I have, but they are all P4 machines.

Will multiple slideshows running with javascript be to much to handle?, and should I consider either cutting back on the slideshows or looking at something other than javascript to display them?

The page can be viewed at http://smileysfurniture.com/page1.php , I am curious to see if anyone else sees their pc CPU bound when loading this page. I am wondering if it's this machine in particular, as I have noticed before that even a page with a javascript scroller will do the same thing.


thanks!

[Twey]

I suspect it's that machine, or possibly that browser. As scripts go, that one's not so resource-intensive. Try in a different browser.

[jscheuer1]

It also could be the fact that all 5 of your slide shows would be trying to preload all of their images at the same time until all are preloaded. Here is another script that, though more complex than ultimate fade, can be configured to act just like it and, its fading mechanism is basically the same as ultimate fade's (just more efficient and cross browser):

http://www.dynamicdrive.com/dynamicindex14/swissarmy/

The reason this script may be better on your older machine is that its preloading is done incrementally.

[Glen_S]

thanks - I'll check out the script when I get time. I just checked and in ie6 the CPU is jumping up and down from 100% to 5% and in FF it is more or less pinned at 100%.

Perhaps changing the timing of the slideshows might help? Right now thet are all changing at the same time.

One other thing I have noticed with this slidehow is that with IE the transition/fade is much smoother than FF, any reason why? I do use FF pretty well 100% of the time, but when designing pages one does have to make sure they are rendered ok in IE as it still is going to be the browser used when people visit it.

[jscheuer1]

As far as complex script effects like scrolling and fading, FF is much less compatible with the Windows kernel or whatever than are either IE or Opera. I only really know from the Windows platform. I use FF and IE but, my primary browser is Opera. FF has some really nice features, especially when augmented with extensions and must be tested in since it is the second most used browser. IE must be tested in even though it has several liabilities as, it is the most used browser.

Older computers will always have some problems with modern scripts if those scripts use a lot of time slices. The fade effect is such a process. A browser that interacts better with the OS will show less of these problems but, if the computer is old enough, it cannot eliminate them entirely.

[Twey]

Fx is notorious for using huge amounts of resources (compared to, say, Opera; it's not possible to judge how resource-intensive IE is due to its integration with the OS). That's not usually a problem on newer computers, but evidently this machine is old enough that it makes a difference.

Personally I now use Konqueror for most of my browsing, again because of the resource problem (I can't have all my nice eye-candy switched on whilst using Fx ). Unfortunately, there are few browser options for Windows; you might want to try Opera.

[Glen_S]

Judging by the site stats IE6 is still by far the most used browser used by any visitors to the site. I am seeing more IE7 and FF, with IE7 the one that is increasing the most. Opera is very rare, at least by the people that visit any sites I have up. One positive thing I notice is that IE7 does seem to behave a little better and more FF-like, for example in the link in the OP you'll notice that in the lower right <div> there is still a slight jaggie showing up in IE6 but in IE7 and FF it renders nice & smooth.

Btw, I changed the timing between slides and it made no difference in CPU load on my older machine. I guess I'll have to take a boo at using the swiss-army version mentioned or just leave it as is, since P3 machines are probably getting fairly rare out there anyway. (Either that or learn how to do flash and use that instead)

One other question about the "swiss-army" version, in the UFSL I was able to tweak some of the settings to the fade and transitions to slow them down even more, giving it an almost flash-like effect, is this doable in the SAV? From taking a quick look at it it doesnt seem like it is, but maybe I missed something..

Thanks again to those that answered.

cheers!

[jscheuer1]

The fade engine for Swiss Army is built on the one for UF. Here is UF's:

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

Hers's the Swiss version:

inter_slide.prototype.fadepic=function(){
if (this.fade&&this.degree<100){
this.faded=0
this.degree+=10
if (this.tempobj.filters&&this.tempobj.filters[0]){
if (typeof this.tempobj.filters[0].opacity=="number") //if IE6+
this.tempobj.filters[0].opacity=this.degree
else //else if IE5.5-
this.tempobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (this.tempobj.style.MozOpacity)
this.tempobj.style.MozOpacity=this.degree/101
else if (this.tempobj.style.KhtmlOpacity)
this.tempobj.style.KhtmlOpacity=this.degree/100
else if (this.tempobj.style.opacity&&!this.tempobj.filters)
this.tempobj.style.opacity=this.degree/101
}
else{
this.faded=1
clearInterval(this.fadeclear)
this.nextcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_0" : this.canvasbase+"_1"
this.tempobj=this.go(this.nextcanvas)
if(this.playing)
this.changeimg()
}
}

The two red values are equivalent in function. Here is where the interval for fade is set in UF:

fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)

In Swiss:

this.fadeclear=setInterval(function(){fadeobj.fadepic()},50)