1

私は初心者のJSプログラマーで、独自のjQueryベースのスライダーを作成しています。これが私がこれまでにしたことです：

HTML：

<div id="keyVisual">

<p id="loading"><span>Loading Content...</span></p>

<ul id="keySlide">
<li id="slideSplash">SPLASH: no pager control on this slide</li>
<li id="slide01"><a href="http://yahoo.com/"></a></li>
<li id="slide02">
<div class="gchild">
    <p>grand child content, feedly is a google reader alternative you might want to think.    
</p>
    <a href="http://feedly.com/" class="link">feedly</a>
</div>
</li>
<li id="slide03">
<div class="gchild">
<p>some grand child content3</p>
<a href="http://yahoo.com" class="link" target="_blank">Yahoo</a>
</div>
</li>
<li id="slide04">
<div class="gchild">
<p>some grand child content4</p>
<a href="http://google.com" class="link" target="_blank">Google</a>
</div>
</li>
</ul>

<div id="btnMoveNext" class="btnSlide"><a href="#">&raquo;</a></div>
<div id="btnMovePrev" class="btnSlide"><a href="#">&laquo;</a></div>
</div><!-- /#keyVisual -->

<!-- pager -->
<ul id="listTopKey" class="cf">
<li><a href="#slide01" class="no1">No.1</a></li>
<li><a href="#slide02" class="no2">No.2</a></li>
<li><a href="#slide03" class="no3">No.3</a></li>
<li><a href="#slide04" class="no4">No.4</a></li>
</ul>

JSについては、 JSFiddleを参照してください。

解決したい最後の問題が1つあります。スクリプトの最後に、各スライドの背景画像の読み込み状況を監視する機能を作成しました。すべてのBG画像が読み込まれると、スライダーが起動します。

これは、最初にページにアクセスしたときは問題ないように見えますが、リンクをクリックしてどこかに移動し、次にこのスライダーページに戻ると（たとえば、ブラウザーの戻るボタンを使用して）、スライダーが続行できないようです（ロード時にスタックするだけです）。シーン）。ほとんどの場合、これはGoogle ChromeとFirefoxの両方で正常に機能しますが、IEでは機能しません。

この状況では、エラー処理を行う必要があると思います。たぶん15秒後setTimeoutに発火する関数を作ることを考えることができます。loader();助言がありますか？

ありがとうございました。

PSコードを自由にカスタマイズまたは実装して、自分で使用してください。

4

1 に答える 1

1

これがあなたのコードのちょっとした修正です。また、エラーハンドラを追加しました。

$.each(_imgURLArr, function(i, val) {
    var _tempImg = $('<img/>').attr('src', val),
        handler = function(event) {
            var img = $(this).off('.preloader');

            console.log(val + 'is loaded!', img);
            _imgCounter++;
            console.log('counter is ' + _imgCounter);
            if (_imgCounter == _childL) {
                loader();
            }
        };

    if (_tempImg[0].complete) {
        handler.call(_tempImg[0], {});
    } else {
        _tempImg
            .on('load.preloader', handler)
            .on('error.preloader', function() {
                var img = $(this).off('.preloader');

                console.log('Error loading img', img);
            });
    }
});
于 2013-03-27T09:22:50.090 に答える