Блог

Я использую галерею изображений js на сайте magento. Поскольку 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--;
}
}
  

Я посмотрел на сайт, и он не кажется медленным, для запуска требуется столько же времени. Похоже, что непрозрачность текста не меняется до конца анимации, а затем просто скрывается. Когда я смотрю с IE7, он работает нормально, что является подсказкой, в IE8 есть другой способ создания прозрачных пленок.

Magento по-прежнему поставляется с Prototype 1.6.0, хотя я знаю, что Prototype 1.6.1 исправляет несколько ошибок IE8, а Prototype 1.7 также исправляет некоторые ошибки IE9. Вы можете попробовать обновить Prototype и Scriptaculous в js/prototype/ js/scriptaculous/ каталогах and . Я не знаю, включена ли эта точная проблема, поэтому вам следует сделать резервную копию перед перезаписью файлов, если это не сработает, у вас будет что-то для отката.