Слайд-шоу, работает в Firefox, но не IE

Question

Есть ли общая проблема с JQuery или что-то более конкретное, что мешает этому работать в IE?Эта скрипка является вилкой.

http://jsfiddle.net/AndyMP/bYrdk/

var images = [
"http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003t.jpg",
"http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005t.jpg",
"http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001t.jpg"
];

var delay = 2000;
var transition = 1000;

for(var i in images)
{
var img = document.createElement("img");
img.src = images[i];
img.onload = function(){
    var parent = document.getElementById("content");
    parent.insertBefore(this,parent.childNodes[0]);
    if(i == images.length - 1)
    {
        i = 0;
        startSlides();
    }
}
}

function startSlides()
{
$("#content img:last").delay(delay).fadeTo(transition,0,function(){
    $(this).insertBefore($(this).siblings(":first")).fadeTo(0,1);
    startSlides();
});
}

Answer 1

Скорее всего, проблема в том, что вы используете цикл for..in для итерации массива.НИКОГДА не делайте этого, потому что вы получите элементы из прототипа массива и вплоть до объекта.

Далее, вы не используете Closures правильно.К моменту загрузки изображения значение i изменится и будет равно images.length (при условии, что вы не ошиблись с первой проблемой. Создайте новое замыкание, в котором значение i равноanchored:

img.onload = (function(i) {return function() {
    var parent = .........................
};})(i);

Эти проблемы вызваны не jQuery, а неправильным пониманием базового JavaScript.

Answer 2

Div пуст, поэтому он не имеет никаких дочерних узлов, а аргумент parent.childNodes[0], предоставленный для insertBefore (), вызывает ошибку, потому что insertBefore() ожидает узел (и получает 'неопределенный')

Вставьте хотя бы   в div или используйте jQuery:

$(this).prependTo(parent);