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

My first jQuery-based slider, needs some error handling

本文关键字：处理 错误 第一个 jquery 我的      更新时间：2023-09-26

我是一个新手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中不行。

我认为我需要为这种情况做一些错误处理。我可以让setTimeout函数在15秒后触发loader();。有什么建议吗?

谢谢。

注:您可以随意自定义或实现代码，并将其用于您自己。

这里是您的代码的小修复。我还添加了错误处理程序。

$.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);
            });
    }
});
相关文章：