jQuery.each() не работает в Firefox и IE?

Question

У меня проблема с использованием функции $ .each между браузерами.

У меня есть списки с фоновыми изображениями, и если они закончены, загрузка родительского DIV будет fadeIn.

Я не знаю, правильно ли написан мой код (но не ошибка js в консоли). Этот код отлично работает в Google Chrome, но не в Firefox и IE (особенно в версиях 8 и .9).

HTML:

<ul id="slides"> 
<li id="slides1"><p><a href="#"><img src="http://placekitten.com/g/200/100" alt=""></a></p></li> 
<li id="slides2"><p><a href="#">No.2</a></p></li> 
<li id="slides3"><p><a href="#">No.3</a></p></li> 
<li id="slides4"><p><a href="#">No.4</a></p></li> 
<li id="slides5"><p><a href="#">No.5</a></p></li> 
</ul> 

жаль насчет грязного кода.

JS:

var _imgCounter = 0; 
var _parent = $('#slides'); 
var _child = $('#slides li'); 
var _childL = _child.length; 
var _imgURLArr = []; 
var _imgURL; 
var _dummyImg; 

_child.each(function() { 
    _imgURL = $(this).css('background-image'); 
    _imgURL = _imgURL.substring(4, _imgURL.length - 1);//omit 'url()' 
    _imgURLArr.push(_imgURL); 
    console.log(_imgURL); 
}); 
console.log(_imgURLArr.length); 
$.each(_imgURLArr, function(i,val) { 
    var _tempImg = $('<img/>').attr('src',val); 
    _tempImg.one('load', function() { 
     console.log(val + 'is loaded!'); 
     _imgCounter++; 
     console.log('counter is ' + _imgCounter); 
     if(_imgCounter == _childL) { 
      _parent.fadeIn('fast'); 
     } 
    }); 
    if(_tempImg.complete) { 
     _tempImg.trigger('load'); 
    } 
}); 

DEMO: http://jsfiddle.net/nori2tae/g8MHs/

я говорил, чтобы загрузить технику здесь: http://goo.gl/971A9

Это не похоже на огонь $ .each функция в FF и IE.

Нужно какое-то решение.

спасибо.

Answer 1

Ваша проблема не в функции each, а в том, что в ней есть котировки. То есть, значение строки является

"http://dummyimage.com/640x400/0f0/fff.png",

и при настройке URL изображения, Firefox разбирает его, а затем обрабатывает как относительный URL и пытается получить доступ к

http://fiddle.jshell.net/nori2tae/g8MHs/show/%22http://dummyimage.com/640x400/0f0/fff.png%22

который приводит к 404, что означает, что обработчик нагрузки никогда не вызывается.

Чтобы исправить:

изменение

_imgURLArr.push(_imgURL);

в

_imgURLArr.push(_imgURL.replace(/"+/g,""));

устранить кавычки.

Вот обновленный рабочий jsFiddle example

Я также предлагаю добавить обработчик, когда изображение не загружается, что позволит сэкономить вам немного таскание за волосы, пытаясь отладить выполнение сценария :)