0

私はここで大げさな推測をしています。私が望むことが可能かどうかはまったくわかりません。WIP http://www.mathijsdelva.be/2013をご覧ください。いくつかの癖を除いて、すべてがうまく機能します。ただし、スマートフォン/タブレットでは、すべてのショットを一度に読み込むのは非常に重いため、Web サイトにロード オン スクロール機能を追加することを考えていました。これをどのようにコーディングを開始すればよいかわかりません。それは私の能力を超えています..現在のコード:

$.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

垂直方向にスクロールしていると仮定すると、概念的には、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にロードします。

于 2013-01-23T21:28:51.317 に答える