PDA

View Full Version : Ultimate Fade-In Slideshow 2.0 - Rough Start/Transition on Mac



coffee
03-11-2010, 02:21 AM
1) Script Title: Ultimate Fade In Slideshow 2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I have a slideshow up here that's working perfectly on the PC for IE, Firefox, Safari, and Opera. However, the user experience on mac computers with both Firefox 3.5 and Safari 4.04 are not great, in that the slideshow has a really rough start and had a stuttering transition problem for the first few images, then it seems to smooth out over time.

My first thought was that the images were not completely loaded while the script was making the transition, but I think the script also pre-loads the images. I have tried to the demo site and that appears to work OK, however those images look much smaller.

Link: http://dev.bozz1.com/owm/

Any thoughts as to my configuration that leads to this, or is this a possible bug affecting Mac users?

Thank you for providing such a great resource, and many thanks for your help.
- Steve

jscheuer1
03-11-2010, 07:54 AM
This (highlighted):


<body onload="load('/images/slides/slide1.jpg','/images/slides/slide2.jpg','/images/slides/slide3.jpg')">

Isn't doing anything because 'load' is undefined. Even if it did what it is obviously intended to do, onload would be too late. The onload event fires when all HTML, css, scripts, and images are loaded. The slide show starts when the script code for the slide show, all HTML and the first image in the show are loaded, which is all but inevitably before onload. In some cases it might be the same as onload, but that would still be too late. In fact, preloading images for use on a page is all but useless unless it is for small images that aren't in the markup, or unless it is completed before the page even begins to load.

You could try preloading all images for the show before it starts. That would probably solve your problem, but it would in some cases delay the start of the show considerably.

What I think is happening now is that the computers experiencing the problem are having trouble downloading the images and fading at the same time. This has less to do with PC vs Mac than with the capacity of the computer to do both things at once smoothly. The OS may be a factor, but the CPU speed, amount available and speed of memory, speed of the HD and buses involved, how well the browser can utilize these resources, and bandwidth of the internet connection are all more critical.

I would first check these 'ailing' computers against a comparable Flash object to see if there isn't also some issue there with smoothness or at least a greater delay between images until all are loaded.

I really don't think there is any real good solution. A fairly good one would be a rewrite of the script. What I would want to see for that would be a mechanism whereby, once the first image is loaded, it fades in. Then once it completes fading, the second image starts loading, once it is done it is either faded in or cued for fade in once the interval between images expires, whichever comes last. Once it fades in we start loading the next image, and so on. This should have the effect of smoothing things out on computers that are older and/or that aren't as fast. But it would in many cases slow down the interval between images at first (often considerably), on some machines (those that can load and fade at the same time) this would be unnecessary, but there would be no way to tell, so all would have to live with it.

Still, there could at times be other processes having nothing to do with the script, perhaps nothing to do with the browser even, going on. For machines/software that are struggling, anything else that is somewhat intensive happening would cause the fade transitions to become less smooth, even after all the images are loaded.

coffee
03-11-2010, 11:43 PM
Thanks for your thoughtful reply!

You're right, the onload thing was a half-hearted attempt to 'see what would happen' and I haven't removed it. Thanks for the heads up on that.

I guess I should look into preloading. How would you approach that?

I'm not sure it's a capacity issue, one of the computers affected is a brandnew macbook pro, and I can't replicate the issue on PC. That's what leads me to believe this might be a bug - something is not working right with this script on OS X.

Many thanks for your help.

jscheuer1
03-12-2010, 04:56 AM
I recently bought a brand new laptop with a very fast duel core AMD processor and tons of memory, 100mbps web and other very good stuff. For most things, it runs rings around anything else I've ever had. However, in Firefox, with several scripts, it's just not doing it. I have two slower single core Intel machines where these scripts blaze, they crawl on the newer machine. The OS may be a factor (XP on the older ones, Windows 7 on the new machine), possibly the chip architecture. But I have to believe in your case, especially with Safari on a Mac, that everything would be optimized as far as the OS and browser go.

So, when I spoke about capacity, I didn't necessarily only mean any given aspect of the hardware and/or software, though I did mean that. One should also consider peculiarities of how everything works together in any given case.

On to your question of preloading - First I should mention that we cannot be certain any of the below (including the other script I suggest after the code here) will solve your issue. What follows is all predicated on the assumption that loading and fading at the same time is the issue.

OK, it's undocumented, but the initialization of the slide show doesn't really need a variable. And the object used can be predefined. In other words we could do it like so (I also wrapped it in a highlighted anonymous function to protect the variable used, that's not required nor particularly good yet. It will become more prudent when we add the preload code):


(function(){
var mygallery = {
wrapperid: "slideshow", //ID of blank DIV on page to house Slideshow
dimensions: [264, 457], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slides/slide1.jpg"],
["images/slides/slide2.jpg"],
["images/slides/slide3.jpg"],
["images/slides/slide4.jpg"],
["images/slides/slide5.jpg"],
["images/slides/slide6.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 600, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
};

new fadeSlideShow(mygallery);
})();

Once we break it out like that, preloading becomes easier to accomplish:


(function(){
var mygallery = {
wrapperid: "slideshow", //ID of blank DIV on page to house Slideshow
dimensions: [264, 457], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slides/slide1.jpg"],
["images/slides/slide2.jpg"],
["images/slides/slide3.jpg"],
["images/slides/slide4.jpg"],
["images/slides/slide5.jpg"],
["images/slides/slide6.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 600, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
}, i = 0, c = 0, ln = mygallery.imagearray.length;

function preload(src){
var im = new Image();
im.onload = function(){
++c;
};
im.src = src;
}

for(i; i < ln; ++i){
preload(mygallery.imagearray[i][0]);
}

function checkload(){
if(c === ln){
new fadeSlideShow(mygallery);
return;
} else {
setTimeout(checkload, 300);
}
}
checkload();
})();

This will as I said delay the start of the show until all images have loaded. You might want to try out:

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

It uses a built in incremental preload that may solve the problem without so much delay for the start of the show. However, preloading is very much like loading. The bytes must get transferred and time is required for that. Here much (when it works well, all) of the byte transfer occurs while the user is viewing the already faded in image. This will lead to (as I mentioned before with this type of preloading) an added delay between images when the interval between images has expired but the the next image isn't ready yet.

coffee
03-12-2010, 06:38 AM
Awesome. I think this is working well now, there is much less hesitation in the transitions. I also switched the background color to the webpage's color to help smooth the transition.

I hear what you're saying about browsers and the handling of multiple scripts, although I'm curious why the problem seems so exaggerated on mac's.

You have been very helpful, thank you!

jscheuer1
03-12-2010, 09:23 AM
Important: When using 64 bit Firefox, plug ins will be problematical, many will not work. So I think I will stick with the 32 bit version running in 32 bit mode, it's quite acceptable.

I just discovered a key ingredient in my problem and it may shed some light on yours. The new machine I was talking about is 64 bit capable and I'm running the 64 bit version of Windows 7 on it. I switched Firefox to XP (a 32 bit OS) compatibility mode and it greatly improved. There is a 64 bit version of Firefox available for Windows, I will be trying that out soon.

OS X is also 64 bit. I found this page:

http://boomswaggerboom.wordpress.com/2009/09/23/64-bit-firefox-for-mac-os-x-up-and-running/

But nothing on an actual 64 bit version for the Mac. Perhaps OS X has a 32 bit compatibility mode that can be used with the existing Firefox. As for Safari, there must be a 64 bit version of it available for Mac - you'd think.