Question

我在这里疯狂猜测;因为我完全不知道我想要的是否可能。看看WIP http://www.mathijsdelva.be/2013。一切都很好，除了一些怪癖。在智能手机/平板电脑上，一次加载我的所有镜头非常沉重，所以我想在我的网站上添加一个滚动加载功能。我不知道我应该怎么开始编码呢;它超出了我的能力..当前代码：

$.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=1000' + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function (data) {
    $.each(data.photoset.photo, function (i, flickrPhoto) {
        var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";
        var basePhotoURLMobile = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_z.jpg";
        var flickrLink = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + flickrPhoto.id + "/";

        var $img = $("<img/>").attr("src", basePhotoURL);
        var $imgMobile = $("<img/>").attr("src", basePhotoURLMobile);
        var $wrap = $("<div class='item'></div>");
        if($(window).width() < 501) {
            $wrap.append($imgMobile);
        } else {
            $wrap.append($img);
        }
        $wrap.append("<a href='" + basePhotoURL + "'.jpg' title='View full size' class='zoom' rel='enroll' />");
        $wrap.append("<a href='" + flickrLink + "' class='flickr' title='View on Flickr' target='_blank' />");
        $wrap.appendTo('#photographs');
    });

    var loaded = 0;
    var totalAmount = $('#photographs .item').length;

    if($(window).width() > 1140) {
        $('#photographs .item').each(function() {
            loaded;
            $(this).imagesLoaded(function($images) {
                loaded++;
                var percentage =  parseInt((loaded / 51) * 100);
                console.log(loaded + ' van de ' + totalAmount);
                $("#bigloader").progressbar({
                      value: percentage
                    });
                if(loaded == 50) {
                    $("#photographs, #loader").fadeIn("fast");
                    $("#bigloader, #preloading").fadeOut("fast");
                    $("#photographs").gridalicious({
                        gutter: 2,
                        animate: true,
                        effect: 'fadeInOnAppear',
                        width: 430
                    });
                } else if (loaded == totalAmount) {
                    $("#loader").fadeOut("fast");       
                };
            }); 
        });
    } else {
        $('#photographs .item').each(function() {
            loaded;
            $(this).imagesLoaded(function($images) {
                loaded++;
                var percentage =  parseInt((loaded / 51) * 100);
                console.log(loaded);
                $("#bigloader").progressbar({
                      value: percentage
                    });
                if(loaded == 50) {
                    $("#photographs, #loader").fadeIn("fast");
                    $("#bigloader, #preloading").fadeOut("fast");
                    $("#photographs").gridalicious({
                        gutter: 2,
                        animate: true,
                        effect: 'fadeInOnAppear',
                        width: 320
                    });
                } else if (loaded == totalAmount) {
                    $("#loader").fadeOut("fast");       
                };
            }); 
        });
    }
});

有人有任何线索吗？我永远感激不尽！

Answer 1

假设您正在垂直滚动，从概念上讲，您可以使用scroll事件来批量ajax请求。你正在使用的api似乎也有页面参数。

//从以下评论中编辑

http://api.jquery.com/scroll
http://docs.jquery.com/CSS/scrollTop

functionCalledByScroll(requestNumber) { 
    $.get('<url>' + 'per_page=<amount you need>' + '&page=<requestNumber>', 
        function (data) { 
            $(data).each(<your call back above>);
        }
    }); 
}

记住您为页面参数提出的请求数量。每个滚动差异请求一些金额（50项）（比如1000px或更多）。然后以与您相同的方式将json对象加载到html中。

自定义json请求中的无限滚动

1 个答案: