我的第一個基於jQuery的滑塊，需要一些錯誤處理

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中不會。

我想我需要爲這種情況做一些錯誤處理。我可以考慮製作一個setTimeout函數，在大概15秒後觸發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); 
      }); 
    } 
});