javascript - 跟进: Preloading images throws undefined error

Question

我问过this question几周前，我们讨论了如何在图库中预加载图像。虽然该解决方案有效，但现在出现的问题是，如果我单击“下一步”预加载接下来的三个图像，而前面只有两个图像，则会运行循环三次，并且 Firebug 会抛出未定义的错误。

这是代码:

 $('#next').bind('click',function(){
                    var $this           = $(this);
                    var $nextimage      = $('#content img:nth-child('+parseInt(current+2)+')');
                    var next = $nextimage.next();
                    for (var i = 0; i < 3; i++)
                    {
                        var img = new Image();
                        img.src = next.attr("alt");
                        next = next.next();
                    }
                    navigate($nextimage,'right');

                });

如何捕获未定义错误，如果只有2个或1个图像，它应该只预加载这些图像，而不是第三次或第二次运行循环来抛出错误？

Answer 1

$('#next').bind('click',function(){
                    var $this           = $(this);
                    var $nextimage      = $('#content img:nth-child('+parseInt(current+2)+')');
                    var next = $nextimage.next();
                    for (var i = 0; i < 3; i++)
                    {
                        if ( !next.length ) break; // This line stops your loop if there isn't any next
                        var img = new Image();
                        img.src = next.attr("alt");
                        next = next.next();
                    }
                    navigate($nextimage,'right');

                });

编辑:

也许 DOM 中有下一个元素，但没有属性“alt”:

$('#next').bind('click',function() {

    var $this = $(this),
        $nextimage = $('#content img:nth-child('+parseInt(current+2)+')'),
        $next = $nextimage.next();

    for (var i = 0; i < 3; i++) {
        if ( !$next.length ) break; // This line stops your loop if there isn't any next
        var img = new Image();
        img.src = next.attr("alt");
        $next = $next.next("[alt]"); // Only takes elements with the alt attribute.
    }

    navigate( $nextimage, 'right' );
});