0

我正在通过 JSON 将图像加载到#photographs 中。它最初加载 10 个镜头，当您向下滚动到某个点（使用航路点）时，它应该“刷新”JSON 提要，以便加载额外的 5 个镜头。我在 JSON URL 中使用 // &per_page=' + itemsLoaded // 为此。每次击中航路点时，var itemsLoaded 都会更新为 +5。

见代码：

var itemsLoaded = 10;    

$.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=' + itemsLoaded + '&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>");
    $(".item:nth-child(9n)").addClass("tenth");

    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;

    $('#photographs .item img').each(function() {
        loaded;
        $(this).imagesLoaded(function($images) {
            loaded++;
            var percentage =  parseInt((loaded / 11) * 100);
            console.log(loaded + ' van de ' + totalAmount);
            $("#bigloader").progressbar({
               value: percentage
            });
            if(loaded == 10) {
                $("#photographs, #loader").fadeIn("fast");
                $("#bigloader, #preloading").fadeOut("fast");
                $("#photographs").gridalicious({
                    gutter: 2,
                    animate: true,
                    effect: 'fadeInOnAppear',
                    width: 430
                });
                $('.item.tenth').waypoint({
                  triggerOnce: true,
                  handler: function(){
                    console.log("arrived at trigger");
                    itemsLoaded = itemsLoaded + 5;
                  }, 
                  offset: '50%'
                });
            } else if (loaded == totalAmount) {
                $("#loader").fadeOut("fast");       
            };
        });
    });

额外说明：

每次击中航点时，itemsLoaded 变量都会更新为 +5 值。itemsLoaded 是我通过 JSON 加载的项目数量的关键；以便 JSON 提要需要刷新。

基本上，我如何使用更新的变量更新现有的 JSON 提要？

4

1 回答 1

1

为了对 flickr API 进行新的调用，您需要将“$.getJSON”方法包装在一个函数中，当航点被击中时，您可以再次调用该函数。我相信您也有一个错误，因为您正在将元素附加到容器中，但是您想要附加接下来的 10 个元素，而不是检索所有相同的元素加上 5。因此，我建议您使用一个变量来引用要从 flickr API 加载的页面，而不是要加载的元素数量。

我相信您正在使用 jquery waypoint 插件，实际上您可以看到在此示例中，仅检索下一个项目并将其附加到容器元素。我相信这就是您想要做的，因为您正在对容器元素进行附加。所以我建议使用一个变量来引用要检索的页面，而不是要检索的元素数量。元素的数量将始终为 10，但您将检索 10 个元素的下一页并将它们附加到容器中。

更改此变量，您的问题的解决方案就这么简单：

function refreshJSON(pageLoaded){
  $.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=10&page=' + pageLoaded + '&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>");
      $(".item:nth-child(9n)").addClass("tenth");

      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;

  $('#photographs .item img').each(function() {
      $(this).imagesLoaded(function($images) {
          loaded++;
          var percentage =  parseInt((loaded / 11) * 100);
          console.log(loaded + ' van de ' + totalAmount);
          $("#bigloader").progressbar({
             value: percentage
          });
          if(loaded == 10) {
              $("#photographs, #loader").fadeIn("fast");
              $("#bigloader, #preloading").fadeOut("fast");
              $("#photographs").gridalicious({
                  gutter: 2,
                  animate: true,
                  effect: 'fadeInOnAppear',
                  width: 430
              });
              $('.item.tenth').waypoint({
                triggerOnce: true,
                handler: function(){
                  console.log("arrived at trigger");
                  pageLoaded++;
                  refreshJSON(pageLoaded);
                }, 
                offset: '50%'
              });
          } else if (loaded == totalAmount) {
              $("#loader").fadeOut("fast");       
          };
      });
  });
}

refreshJSON(1); // we start by loading the first page
于 2013-01-26T21:00:25.473 回答