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

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

加载内容

飞溅：此幻灯片上没有寻呼机控件


grand child content，feedly是谷歌阅读器的替代品，你可能会想。



一些孙儿满足感



一些孙子

有关JS，请参阅

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

这在我第一次访问页面时看起来很好，但如果我单击某个链接转到某个地方，然后返回到此滑块页面（例如使用浏览器返回按钮），滑块似乎无法继续（只是在加载场景中堆叠）。大多数情况下，这在谷歌Chrome和Firefox中都能正常工作，但在IE中却不行

我想我需要对这种情况进行一些错误处理。我可以考虑做一个

setTimeout

函数来激发

loader（）大概15秒后。有什么建议吗

多谢各位

另外，请随意定制或实现代码，并自己使用。
下面是代码的小补丁。我还添加了错误处理程序

$.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);
            });
    }
});

$。每个（\u imgurlar，函数（i，val）{
var_tempImg=$（'这里是代码的小补丁。我还添加了错误处理程序

$.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);
            });
    }
});

$。每个（\u imgurlar，函数（i，val）{
变量_tempImg=$（“在绑定加载事件之前，您是否检查了图像的
complete
属性？因为如果您的图像已经加载，它们将被缓存，而您的事件不会被缓存。”trigger@ant_Ti我已经在第380行使用了
complete
。请看一下我的JSFIDLE。这不起作用吗？您在那里有错误。几分钟后将发布修复程序在绑定加载事件之前，您是否检查了图像的
complete
属性？因为如果您的图像已经加载，它们将被缓存，而您的事件不会被缓存trigger@ant_Ti我已经在第380行使用了
complete
。请看一下我的JSFIDLE。这不起作用吗？你在那里有错误。将在几分钟后修复我很想纠正我的错误。但是我对
call
方法完全陌生。需要一些时间来理解。@norixxx@norixxx用两个字来说，传递给
call
的第一个参数将是
这个执行函数中的
现在我慢慢理解了这个想法，但有一件事。你为什么要把[0]对于_tempImg，为什么不只是_tempImg？@norixxx，因为
\u tempImg
是
jQuery
对象，而
事件处理程序中的这个
是DOM对象。这是为了代码一致性而做的。多亏纠正了我的错误。但是我对
调用
方法完全陌生。需要一些时间来理解。@norixxx@norixxx首先用两个词说传递给
call
的参数将是执行函数中的
此
，现在我慢慢理解了这个想法，但有一件事。为什么要将[0]放在_tempImg上，为什么不只放在_tempImg？@norixxx上，因为
\u tempImg
是
jQuery
对象，而
此
在事件处理程序中是DOM对象。这是为了代码一致性而设计的。