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):
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:
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: ""
}, 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/dynamici...army/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.
Bookmarks