1

ブラウザ間で$.each関数を使用する際に問題があります。

背景画像のリストがあり、それらの読み込みが完了すると、親DIVがフェードインします。

コードが正しく記述されているかどうかはわかりません（ただし、コンソールにjsエラーはありません）。このコードはグーグルクロームでは正常に動作しますが、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');
    }
});

デモ：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 に答える