0

真的用这个打了我的头。我有可变数量的图像以 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);
4

1 回答 1

2

这是一个更简单的方法来做到这一点。解释一下，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/

于 2012-04-14T02:39:08.540 回答