jQuery.each（）不適用於Firefox和IE？

我在瀏覽器之間使用$ .each函數時遇到問題。jQuery.each（）不適用於Firefox和IE？

我有背景圖像列表，如果他們完成加載父DIV將淡入。

我不知道我的代碼是否正確寫入（但在控制檯中沒有js錯誤）。此代碼在谷歌瀏覽器中正常工作，但不在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

這似乎並不火。每個$功能FF和IE瀏覽器。

需要一些解決方案。

謝謝。

來源

2013-03-25 norixxx

您的問題不在於each函數，而是URL中引號的事實。也就是說，字符串的值是

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

和設置圖像URL時，火狐解析，然後把作爲相對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

我還建議增加對當圖像加載失敗的處理程序，這將節省你的頭髮試圖調試腳本:)

來源

2013-03-25 12:38:25 OpherV

+1的實施拉動時很好看... – 2013-03-25 12:41:24

是的，這是做的伎倆！所以我可以有點說鉻是更聰明:)也謝謝你的錯誤處理建議。 – norixxx 2013-03-25 21:16:28

jQuery.each（）不適用於Firefox和IE？

回答

相關問題