在数组中加载图像块的 jQuery 函数

Question

这个真的让我大吃一惊。我有可变数量的图像以 5 个为一组加载到页面中。在页面加载时，我尝试加载前 5 个，之后的每个组都将通过单击链接添加。

我的逻辑是这样的：

• 在页面加载

上创建一个包含所有列表元素的数组

• 将数组的前 10 个传递给一个函数，该函数将 li 转换为图像并在 窗口加载

时将其淡入页面

• 在用户点击加载更多按钮时从数组中传递额外的 5 组

我的代码不遵循上述逻辑但确实转换了 li 并将它们淡入如下：

在 jsfiddle 上查看完整的评论混乱： http://jsfiddle.net/danielredwood/qntMg/

感谢您的帮助！

function buildImg() {
    $('.userGallery li').each(function(){
        var loc = $(this).find('a').attr('href'),
            ttl = $(this).find('a').attr('title'),
            img = $('.userGallery').append($('<img/>', { class: 'user', src: loc, alt: ttl })),
            usr = $('.user');

        $(this).remove();

        usr.each(function(i){
            $(this).delay(200*i).animate({ opacity:1 },400);
        });
    });
}

    var elm = $('.userGallery li'),
        cnt = 0,
        tns = [];

    for(i=0;i<elm.length;i++){
       if(cnt==10){
         buildImg(tns);
         tns=[];   
       }
       tns[cnt++]=elm[i].image;
    }

    buildImg(tns);

Answer 1

这里有一个更简单的方法来做到这一点。解释一下，buildImg() 会找到所有需要的链接，并为每个链接创建图像对象并将它们放入一个数组中。

loadMore() 将接下来的 10 张图像加载到图库中并启动它们的.fadeIn() 动画。 loadMore() 最初被调用一次（以加载前 10 张图像），然后在每次单击 loadMore 按钮时加载下一个 5。

因为您的 jsFiddle 中只有 10 张图片，所以我复制它们只是为了让您了解它如何处理超过 10 张图片。

所有内容都封装在 document.ready 处理程序中，以便在加载 DOM 时启动它，因此我们的全局变量不是真正的全局变量（因此它们位于函数块内）。

$(document).ready(function() {
    var imgInfo = [];
    var imgCntr = 0;
    function buildImg() {
        $('li a').each(function(){
            var img = new Image();
            img.src = this.href;
            img.alt = this.title;
            img.className = 'user';
            img.style.display = "none";
            imgInfo.push(img);
        });
    }

    function loadMore(num) {
        var gallery = $('.userGallery');
        var delay = 0;
        for (len = Math.min(imgInfo.length, imgCntr + num); imgCntr < len; imgCntr++) {
            gallery.append(imgInfo[imgCntr]);
            $(imgInfo[imgCntr]).delay(delay).fadeIn(400);
            delay += 400;
        }
    }

    buildImg();
    loadMore(10);

    $(".loadMore").click(function() {
        loadMore(5);
        return(false);
    });
});​

这里的工作演示：http://jsfiddle.net/jfriend00/h2GVz/

这里有一个更复杂的版本，它在加载图像之前不会开始为图像设置动画，以防加载时间超过预定的动画时间。你可能不需要这个额外的复杂性，但我对如何做到这一点很感兴趣，所以我写了它：http://jsfiddle.net/jfriend00/WAuuB/