My first jQuery-based slider, needs some error handling

Question

I am a newbie JS programmer making my own jQuery based slider. Here is what I have done so far:

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>

For JS, please refer to JSFiddle

I have one final problem I hope to solve. At the end of the script, I made a function which watches the load status of background images for each slide. When all the BG images are loaded, the slider starts.

This looks fine first time I visit the page but if I click a link to go somewhere, and then come back to this slider page (using browser back button for example), it seems like the slider fails to go on (just stack in loading scene). Most of the time this works fine in both Google Chrome and Firefox, but not in IE.

I think I need to make some error handling for this situation. I can just think of making a setTimeout function to fire loader(); after maybe 15 seconds. Any suggestions?

Thank you.

P.S. Feel free to customize or implement the code and use it for your own.

Did you check `complete` property of image before binding load event? Because if your images has already been loaded they will be cached and your event won't trigger — ant_Ti, Mar 27 '13 at 08:16
@ant_Ti I have already used `complete` at line 380 please take a look my JSFiddle. Doesn't this do the trick? — norixxx, Mar 27 '13 at 09:13

score 1 · Accepted Answer · answered Mar 27 '13 at 09:22

1

Here is little fix for your code. Also i added error handler.

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

answered Mar 27 '13 at 09:22

ant_Ti

2,385
16
14

thanks of correcting my mistake. But I am completely new to `call` method. need some time to understand. – norixxx Mar 27 '13 at 10:58
@norixxx http://stackoverflow.com/questions/9001830/the-reason-to-use-js-call-method – ant_Ti Mar 27 '13 at 12:21
@norixxx in two words first argument passed to `call` will be `this` in executed function – ant_Ti Mar 27 '13 at 12:22
Now I slowly understand the idea but one thing. Why'd you put [0] to _tempImg and why not just _tempImg? – norixxx Mar 27 '13 at 14:01
@norixxx because `_tempImg` is `jQuery` object and `this` in event handler is DOM object. This was made for code consistency. – ant_Ti Mar 27 '13 at 14:47
i did not know i can retrieve DOM object by putting `[0]` to variable. I think now everything made sense to me :) – norixxx Mar 27 '13 at 23:25
Oh, I forgot to check how this works in IE8. sometimes I still stack in loading contents... status. nnn... – norixxx Mar 28 '13 at 00:39
OK. here's my test server http://abs.sagamono.com/index_t1.html id and pass (test/test123) test this in Internet Explorer ver.8. click OUTER LINK and come back to slider page. the problem happens let's say 1 out of 10 times. – norixxx Mar 28 '13 at 01:56
never mind for IE8 I think it doesn't work probably because I use IE tester to see the slider. Thank much @ant_Ti. – norixxx Mar 30 '13 at 03:03

My first jQuery-based slider, needs some error handling

1 Answers1