1

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

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

我不知道我的代码是否正确编写（但控制台中没有 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');
    }
});

演示：http: //jsfiddle.net/nori2tae/g8MHs/

我在这里提到了加载技术：http: //goo.gl/971A9

这似乎不会触发 FF 和 IE 中的 $.each 函数。

需要一些解决方案。

谢谢你。

4

1 回答 1

4

您的问题不在于each函数，而在于 URL 中包含引号的事实。也就是说，字符串的值为

"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 示例

我还建议在图像加载失败时添加一个处理程序，这样可以在尝试调试脚本的实现时为您节省一些头发：)

于 2013-03-25T12:38:25.280 回答