Question

我在浏览器之间使用$ .each函数时遇到问题。

我有背景图像的列表，如果完成加载，父DIV将会淡入。

我不知道我的代码是否写得正确（但是在控制台中没有js错误）。此代码在Google Chrome中运行良好，但在Firefox和IE中则无效（特别是在ver.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中激发$ .each功能。

需要一些解决方案。

谢谢。

Answer 1

问题不在于each功能，而在于URL中有引号的事实。也就是说，字符串的值是

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

并且在设置图片网址时，Firefox会对其进行解析，然后将其视为相对网址并尝试访问

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

导致404，这意味着永远不会调用load handler。

要修复：

变化

_imgURLArr.push(_imgURL);

到

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

消除报价。

此处有更新的工作jsFiddle example

我还建议在图像无法加载时添加处理程序，这样可以在尝试调试脚本实现时省去一些头发：）

jQuery.each（）在Firefox和IE中不起作用？

1 个答案: