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？

回答

相关问题