IE keeps loading images used for a certain animation on my website; the animation is enabled by the following JavaScript slide show script. Why is this happening ...??? How can I stop this? How can I tell IE to intelligently preload all images instead of loading them over and over ...??? ... <script type="text/javascript"> /*********************************************** * Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]=["img/animation/model1.jpg", "", ""] //plain image syntax fadeimages[1]=["img/animation/model2.jpg", "", ""] //image with link syntax fadeimages[2]=["img/animation/model3.jpg", "", ""] //image with link and target syntax fadeimages[3]=["img/animation/model4.jpg", "", ""] //image with link and target syntax fadeimages[4]=["img/animation/model5.jpg", "", ""] //image with link and target syntax var fadebgcolor="white" ////NO need to edit beyond here///////////// var fadearray=new Array() //array to cache fadeshow instances var fadeclear=new Array() //array to cache corresponding clearinterval pointers var dom=(document.getElementById) //modern dom browsers var iebrowser=document.all function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){ this.pausecheck=pause this.mouseovercheck=0 this.delay=delay this.degree=10 //initial opacity degree (10%) this.curimageindex=0 this.nextimageindex=1 fadearray[fadearray.length]=this this.slideshowid=fadearray.length-1 this.canvasbase="canvas"+this.slideshowid this.curcanvas=this.canvasbase+"_0" if (typeof displayorder!="undefined") theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :) this.theimages=theimages this.imageborder=parseInt(borderwidth) this.postimages=new Array() //preload images for (p=0;p<theimages.length;p++){ this.postimages[p]=new Image() this.postimages[p].src=theimages[p][0] } var fadewidth=fadewidth+this.imageborder*2 var fadeheight=fadeheight+this.imageborder*2 if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox) document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>') else document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>') if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox this.startit() else{ this.curimageindex++ setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay) } } 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 if (obj.tempobj.style.opacity&&!obj.tempobj.filters) obj.tempobj.style.opacity=obj.degree/101 } 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) } } fadeshow.prototype.populateslide=function(picobj, picindex){ var slideHTML="" if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">' slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">' if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML+='</a>' picobj.innerHTML=slideHTML } fadeshow.prototype.rotateimage=function(){ if (this.pausecheck==1) //if pause onMouseover enabled, cache object var cacheobj=this if (this.mouseovercheck==1) setTimeout(function(){cacheobj.rotateimage()}, 100) else if (iebrowser&&dom||dom){ this.resetit() var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) crossobj.style.zIndex++ fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var ns4imgobj=document.images['defaultslide'+this.slideshowid] ns4imgobj.src=this.postimages[this.curimageindex].src } this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0 } fadeshow.prototype.resetit=function(){ this.degree=10 var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) if (crossobj.filters&&crossobj.filters[0]){ if (typeof crossobj.filters[0].opacity=="number") //if IE6+ crossobj.filters(0).opacity=this.degree else //else if IE5.5- crossobj.style.filter="alpha(opacity="+this.degree+")" } else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=this.degree/101 else if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity=this.degree/100 else if (crossobj.style.opacity&&!crossobj.filters) crossobj.style.opacity=this.degree/101 } fadeshow.prototype.startit=function(){ var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) this.populateslide(crossobj, this.curimageindex) if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER var cacheobj=this var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid) crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1} crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0} } this.rotateimage() } </script> ... Code (markup): ... <script type="text/javascript"> //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder) new fadeshow(fadeimages, 354, 250, 0, 3000, 0) </script> ... Code (markup):
Hello, that script is huge and a bit outdated. I wrote this one, give it a try if you want: <script type="text/javascript"> var faddingSpeed = 2; //1 to any, 1 is faster var stopOnMouseOver = true; Object.prototype.addEvent = function(evtType, func) { if (this.addEventListener) { this.addEventListener(evtType, func, true); } else if (this.attachEvent) { this.attachEvent('on' + evtType, func); } else { this['on' + evtType] = func; } } function SlideShow(slideel) { var imgs = slideel.getElementsByTagName('img'); var slideShowImgs = []; for (var i = 0; i < imgs.length; i++) { slideShowImgs[i] = new SlideShowImage(imgs[i], this); } var maxImg = slideShowImgs.length - 1; var currentImg = maxImg; var mouseIsOver = false; this.next = function() { if (mouseIsOver) return; slideShowImgs[currentImg].fadeOut(); if (currentImg == maxImg) currentImg = 0; else currentImg++; slideShowImgs[currentImg].fadeIn(); } var self = this; if (stopOnMouseOver) { slideel.addEvent('mouseover', function() { mouseIsOver = true; }); slideel.addEvent('mouseout', function() { mouseIsOver = false; self.next(); }); } this.next(); function SlideShowImage(img, slideShow) { img.style.opacity = '0'; this.fadeIn = function() { var interval = window.setInterval(function() { var opacity = parseFloat(img.style.opacity); if (opacity < 1) img.style.opacity = opacity + 0.025; else { window.clearInterval(interval); slideShow.next(); } }, faddingSpeed * 25); } this.fadeOut = function() { var interval = window.setInterval(function() { var opacity = parseFloat(img.style.opacity); if (opacity > 0) img.style.opacity = opacity - 0.025; else window.clearInterval(interval); }, faddingSpeed * 25); } } } window.addEvent('load', function() { new SlideShow(document.getElementById('slideshow')); }); </script> <div id="slideshow" style="position: relative"> <img src="img/animation/model1.jpg" style="position: absolute; top: 0px; left: 0px" /> <img src="img/animation/model2.jpg" style="position: absolute; top: 0px; left: 0px" /> <img src="img/animation/model3.jpg" style="position: absolute; top: 0px; left: 0px" /> <img src="img/animation/model4.jpg" style="position: absolute; top: 0px; left: 0px" /> <img src="img/animation/model5.jpg" style="position: absolute; top: 0px; left: 0px" /> </div> Code (markup): Cheers
Ok, a couple of questions (By the way, I like your coding style; it looks elegant). Does this work in all browsers ...? (I'm sure it does, but I want to ask ...) Does this work on all platforms like Windows, Mac and Linux? Also ... if I add another JavaScript animation or two, is there going to be any conflict? Does this animation slow down for some reason ...???
Hello, no, I forgot some simple things... Here's a crossbrowser versionI then created a blog post about it, take a look at: http://www.hrcerqueira.com/simple-fade-in-fade-out-javascript-slideshow/ Code (markup): Cheers
Hi, I appreciate your help, but this code doesn’t seem to work. I tried in Firefox and IE (6.0). No luck so far … Am I missing something?
Did you included the dom functions I talked in the post? Theyr located at: http://www.hrcerqueira.com/mfiles/dom.js Code (markup): Include those and you'll be fine. You don't need all of them, but they can be usefull in other stuff as well.
When I tried to copy the code from the blog, it didn’t work for some reason. Maybe I didn’t copy and paste correctly …? Anyway, I just downloaded the following two files http://www.hrcerqueira.com/mfiles/dom.js http://www.hrcerqueira.com/mfiles/slideshow.js and just included them. Now this thing is working … .
Hi, I thought this works perfectly, but I found a minor problem. I can't be 100% sure if it's a problem or you did this intentionally, but this does not work well for me. It seems that the last frame of an image fading in does not have opacity 100%. I can actually see through the background. Is this intentional? Regardless, if I want to set the last frame's opacity to 100%, how do I modify this code? I'd greatly appreciate your help ...
What a stupid mistake. When I was wroting the script, I tested some different values for the fadding between frames to check wich one works the best, but I forgot to update the number of frames. Just open the slideshow.js file and replace every instance of the number 40, by 50, or go back to my site and grab the updated file.
Ok, I have a few more questions and possibly … requests. q1. I open a page playing this page and I go do something else. Maybe I minimize the browser window, maybe I just run an application on top of the browser. When I come back, it seems that this slideshow speeds up … a lot. I wasn’t so sure if this was caused by my misuse of the script, so I checked your page; it seems that this happens on your page also. Can we do something about this? q2. I’m playing two videos on the preliminary design page that I’m currently working on. One video plays ok, but the other doesn’t play smoothly. I don’t see constant intervals. I have the following code addOnLoad(function() { new SlideShow($('slideshow'), 0, 200, false); new SlideShow($('slideshow2'), 35, 1500, true); }); Code (markup): to play two videos. Also you can see this in action here. q3. If want to hide all images or all images expect for the first one, what do I do? Can I do this?
Hello, q1 and q2 are a bit complicated issues. Thy happen because javascript is a procedural language, and has some weird priorities, being dom modifications the bottommost task in the priorities queue. Since the script is making some success, I'll fix that and then post the modifications. q3 is a quick fix. Hide all the images using the "display: none" style attribute, and then on the script add this line: img.style.display = ''; Code (markup): after: img.style.opacity = '0'; //hide the image in firefox img.style.filter = 'alpha(opacity=0)'; //hide the image in ie Code (markup):
I've fixed those issues, should run much better now. Just grab the slideshow.js (I hadn't updated the code on the post yet). Also, regarding q2, you're using 0 as the animation speed on the first slideshow definition. It must start at 1.
Sorry to give you so much trouble, but there is yet another problem. If you hide the browser's window by another application and you remove that by minimizing it, then the animation stops. It only starts moving after you resize the browser's window.
Yes, it's supposed to stop when the browser lost focus. You can change that behaviour. Remove this piece of code: window.addEvent('blur', function() { this.hasFocus = false; }); window.addEvent('focus', function() { this.hasFocus = true; slideshow.next(true); }); Code (markup): and change this if (slideel.mouseOver || !window.hasFocus) return; Code (markup): to this if (slideel.mouseOver) return; Code (markup):