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/

jQuery函数，用于加载数组中的图像块

1 个答案: