Background Image Carousel does not always finalize

[knstbsscrpts]

1) Script Title: Background Image Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

3) Describe problem: On older browsers this script works once. If you return to the page later the script gets stucked. Probably some caching-problem. Appending random numbers to the .js files did not work.

[jscheuer1]

Using a text only editor like NotePad, find this section of the code:


for (var i=0, max=setting.imagearray.length; i<max; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=setting.imagearray[i][0]
$(preloadimages[i]).bind('load error', function(){
imagesloaded++
if (imagesloaded==max){ //when all images have preloaded
$(function(){ //on document.ready
slideshow.init($, slidesHTML)
})
}
})
slidesHTML+=bgCarousel.routines.getSlideHTML(setting, setting.imagearray[i], '100%', '100%', this.posprop)+'\n'
}

replace it with:


for (var i=0, max=setting.imagearray.length; i<max; i++){ //preload images
preloadimages[i]=new Image()
$(preloadimages[i]).bind('load error', function(){
imagesloaded++
if (imagesloaded==max){ //when all images have preloaded
$(function(){ //on document.ready
slideshow.init($, slidesHTML)
})
}
})
preloadimages[i].src=setting.imagearray[i][0]
slidesHTML+=bgCarousel.routines.getSlideHTML(setting, setting.imagearray[i], '100%', '100%', this.posprop)+'\n'
}

[knstbsscrpts]

Your fix worked!

ByTheWay: tried newer browser (ie-8) and problem remained, so i guess i was wrong about the old browser-issue.

I hope i can return a favor in the future :)

[jscheuer1]

I think it's only a problem in IE and only a problem in IE 8 and less. But I suppose some other older browsers could be affected as well.

Whenever you do something to an image when it loads/errors, it's best to assign that behavior before you assign that image its source (src attribute or property). If not, there's always the chance that the event(s) you're assigning will have fired before the script parser has assigned them.

That's all I did - move the assignment of src to after the assignment of the load/error events.

[knstbsscrpts]

Helas,

With a friend that has a 'windows 7/Firefox-system' (i don't know which version FF) the script still doesn't initialize. I cannot test it myself, but maybe if you slideshow.init after the preloadimages block, document.ready or not?

[jscheuer1]

Works fine here in Windows 7/Firefox. This development might not be a bug, probably isn't. Are you hot linking to the Dynamic Drive images? That would cause it as they must be cached on the user's system, otherwise they will be blocked. But it could be something else.

If that's not the problem and you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[knstbsscrpts]

Sorry, i thought i already gave the domainname: www.kunstbus.nl

The scripts works on 99% of the systems.

I am not hotlinking, might be my friends IE/FF system that flaws, maybe some filter they have. I have changed the bgcarousel.js slightly now, but my friend is not available so i can't ask him if the script works until tomorrow.

Before your fix, the script didn't work on safari/windows from another friend as well. On this moment i can't ask him if it works now, i'll ask him tomorrow.

Nothing has changed after decades of internet, still no 100% compatibility, sigh...

[jscheuer1]

Works fine here in Windows 7/Firefox and Safari. But what you did or perhaps and/or in addition to it you left out the loading image. In any case, there's no loading image and the images don't preload in Safari so it's jerky until they do load.

There never was any problem with the script in those other browsers though. The demo on Dynamic Drive works fine in all of them. The change we made to fix IE 8 and less would not hurt the other browsers. So commenting out the document ready from preload routine and placing it elsewhere should be unnecessary. And it makes the startup of the slideshow messier when the images haven't been cached yet.

If your friends are still having trouble, tell them to refresh the page and/or clear the browser's cache. They may still be viewing the old version from cache.

[knstbsscrpts]

I had to tell them how to refresh a page, so chances are that the script works 100%, but not until i come there and press f5 personally :)

I am not a html/css-programmer (perl is my game) and didn't even know about the existence of jquery until two days ago, so i don't know what you mean when you say 'you left out the loading image'. The ajaxload.gif is there isn't it?

[jscheuer1]

I've since looked, and yes the loading image is there. I did say "and/or", so I'm thinking now it's because you short circuited the preloading routine. The images still preload, but the slideshow no longer waits until the images are loaded to begin. So you don't see the loading image and the slideshow advances even if the images aren't loaded yet. The current image can even show up in mid slide, which is disconcerting and jerky looking when it happens.

But, on a slow connection I suppose it might give the impression that things are getting underway faster.

A little background on document ready. It fires when the document has been parsed, or if the document has already been parsed, it fires immediately.

So, the way the preload routine was set up, when the page and its resources (including the images in the slideshow) aren't cached, it waits until the images are loaded. But when they're already cached, it only waits until the HTML code is read.

The only problem was that in IE 8 and less, the images when cached were seen as loaded before the load event was assigned, so it never fired because its trigger had already passed.

What we did fixed that. What you later did was make it so that no browser waits until the images are loaded. That's sort of OK. But when the images aren't in the cache yet, it makes things jerky.

[knstbsscrpts]

If the cache is a problem, why not switch it off.

Maybe something like:

if (browser has cacheproblem) image.jpg = 'image.jpg?' + date.time

[jscheuer1]

The cache is only a problem if you've viewed a previous version of the page with bad code on it. So just fix the code and tell your testers to refresh the page. Others, if they have the misfortune to have visited the page before it was upgraded will either refresh the page instinctively or have to wait until the page expires in their cache - Usually a day or so, sometimes more sometimes less.

[ddadmin]

Official .js file updated with John's fix. :)