Question

I’m using a js image gallery on a magento site. Because Magento uses prototype, I’ve used prototype for this gallery; it’s a simple application and I thought it unnecessary to load jQuery library as well just for this one element.

If you have a look at http://web74.justhost.com/~persia28/ in IE8 or less, the transitions between gallery slides is so slow, to the point where the text from one slide remains visible for a short time when the next slide is in place.

I know IE is rubbish with js, but I thought the extent of the slowness here is extreme, even for IE.

I don’t want to load jQuery library just for this one gallery, Magento is enough of a tank as it is; so if it came to that I might opt for just putting the text in the images, not in HTML.

Anyway, would be great to hear your wisdom.

Many thanks, and here is the js code for the gallery.

var i = 0;          

// The array of div names which will hold the images.
var image_slide = new Array('image-1', 'image-2', 'image-3');

// The number of images in the array.
var NumOfImages = image_slide.length;

// The time to wait before moving to the next image. Set to 3 seconds by default.
var wait = 4000;

// The Fade Function
function SwapImage(x,y) {       
$(image_slide[x]).appear({ duration: 1.5 });
$(image_slide[y]).fade({duration: 1.5});
}

// the onload event handler that starts the fading.
function StartSlideShow() {
play = setInterval('Play()',wait);
$('PlayButton').hide();
$('PauseButton').appear({ duration: 0});

}

function Play() {
var imageShow, imageHide;

imageShow = i+1;
imageHide = i;

if (imageShow == NumOfImages) {
    SwapImage(0,imageHide); 
    i = 0;                  
} else {
    SwapImage(imageShow,imageHide);         
    i++;
}
}

function Stop () {
clearInterval(play);                
$('PlayButton').appear({ duration: 0});
$('PauseButton').hide();
}

function GoNext() {
clearInterval(play);
$('PlayButton').appear({ duration: 0});
$('PauseButton').hide();

var imageShow, imageHide;

imageShow = i+1;
imageHide = i;

if (imageShow == NumOfImages) {
    SwapImage(0,imageHide); 
    i = 0;                  
} else {
    SwapImage(imageShow,imageHide);         
    i++;
}
}

 function GoPrevious() {
clearInterval(play);
$('PlayButton').appear({ duration: 0});
$('PauseButton').hide();

var imageShow, imageHide;

imageShow = i-1;
imageHide = i;

if (i == 0) {
    SwapImage(NumOfImages-1,imageHide); 
    i = NumOfImages-1;      

} else {
    SwapImage(imageShow,imageHide);         
    i--;
}
}

Answer 1

I looked at the site and it doesn’t seem slow, it takes the same time to run. It looks as though the text is not changing in opacity until the end of the animation then is just being hidden. When I look with IE7 it works normally which is a clue, IE8 has a different way of making transparencies.

Magento still ships with Prototype 1.6.0 when I know that Prototype 1.6.1 fixes several IE8 bugs and Prototype 1.7 fixes some IE9 bugs too. You could try upgrading Prototype and Scriptaculous in the js/prototype/ and js/scriptaculous/ directories. I don’t know if that exact problem is included which is why you should make a backup before overwriting files, if this doesn’t work you will have something to rollback to.