0

我在这里胡乱猜测；因为我完全不知道我想要的是否可能。看看 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");       
                };
            }); 
        });
    }
});

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

4

1 回答 1

0

假设您正在垂直滚动，从概念上讲，您可以使用滚动事件来发出批处理 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>);
        }
    }); 
}

记录您对页面参数发出的请求数。每个滚动差异（例如 1000 像素或更多）请求一些数量（50 项）。然后以与您相同的方式将 json 对象加载到 html 中。

于 2013-01-23T21:28:51.317 回答