javascript - 我可以优化此 js 原型(prototype)库以在 IE 中更快地制作动画吗？

Question

我在 magento 网站上使用 js 图片库。因为 Magento 使用原型(prototype)，所以我为这个画廊使用了原型(prototype)；这是一个简单的应用程序，我认为没有必要只为这个元素加载 jQuery 库。

如果你看看http://web74.justhost.com/~persia28/在 IE8 或更低版本中，画廊幻灯片之间的转换非常缓慢，以至于当下一张幻灯片就位时，一张幻灯片的文本在短时间内仍然可见。

我知道 IE 是 js 垃圾，但我认为这里的缓慢程度是极端的，即使对于 IE 也是如此。

我不想只为这个画廊加载 jQuery 库，Magento 就足够了；所以如果到了那个地步，我可能会选择只将文本放在图像中，而不是放在 HTML 中。

无论如何，很高兴听到您的智慧。

非常感谢，这是画廊的 js 代码。

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

我查看了网站，它似乎并不慢，运行时间相同。看起来文本的不透明度直到动画结束才发生变化，然后才被隐藏。当我使用 IE7 查看时，它可以正常工作，这是一个线索，IE8 有不同的制作透明胶片的方式。

当我知道 Prototype 1.6.1 修复了几个 IE8 错误并且 Prototype 1.7 也修复了一些 IE9 错误时，Magento 仍然附带 Prototype 1.6.0。您可以尝试在 js/prototype/ 和 js/scriptaculous/ 目录中升级 Prototype 和 Scriptaculous。我不知道是否包括那个确切的问题，这就是为什么您应该在覆盖文件之前进行备份，如果这不起作用，您将有一些东西可以回滚。