1

我是一个新手 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();有什么建议么？

谢谢你。

PS 随意自定义或实现代码并将其用于您自己的。

4

1 回答 1

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);
            });
    }
});
于 2013-03-27T09:22:50.090 回答