Question

我是一个新手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

我希望解决一个最后的问题。在脚本的最后，我创建了一个函数，用于监视每张幻灯片的背景图像的加载状态。加载所有BG图像后，滑块启动。

我第一次访问该页面看起来很好但是如果我点击一个链接去某处，然后回到这个滑块页面（例如使用浏览器后退按钮），似乎滑块无法继续（只是堆叠在加载场景中）。大多数情况下，这在Google Chrome和Firefox中均可正常使用，但在IE中则无效。

我认为我需要针对这种情况进行一些错误处理。我可以考虑在可能的15秒后发出setTimeout函数来触发loader();。有什么建议吗？

谢谢。

P.S。您可以随意自定义或实现代码并将其用于自己的代码。

Answer 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);
            });
    }
});

我的第一个基于jQuery的滑块，需要一些错误处理

1 个答案: