向 Instagram 提要添加分页或延迟加载答案

【问题标题】：Adding Pagination or Lazy Load to Instagram feed向 Instagram 提要添加分页或延迟加载
【发布时间】：2014-06-27 10:39:42
【问题描述】：

我正在为一项时尚活动制作 Instagram 供稿，Instagram 用户将使用通用标签为他们的照片添加标签。该脚本基于 Instagram API，然后将所有带有此通用标签的最新帖子拉到网页上。

显然，Instagram 将脚本限制为 20 个图像请求，因此我一直在寻找一种方法来实现分页功能，或者更优选地，实现 ajax“加载更多”按钮或延迟加载插件。与http://blackrebelmotorcycleclub.com/media/ 的提要类似的内容将是完美的。

如果有人能对我如何处理这件事有所了解，那就太好了。我对 Javascript 和 Ajax 的了解有限，而且我遇到的很多教程都没有详细介绍代码的实际实现。

可以在 www.lovedesignerglasses.com/ig-feed 查看当前的发展。我还包括了下面的 instagram 脚本。

谢谢！

Javascript

<script type="text/javascript">
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/tags/sunglasses/media/recent?    access_token=415664389.bc04464.baabf071a76e48a191d4c6680f6a526a",
        success: function(data) {
            for (var i = 0; i < 18; i++) {
                $(".tagged-photos").append("<li><a class='instagram-photo' target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.standard_resolution.url + "'></img></a></li>");
            }
        }
    });
</script>

HTML

<ul class="tagged-photos">
</ul>

【问题讨论】：

标签： javascript html ajax pagination instagram

【解决方案1】：

这里是一些支持分页和延迟加载的示例代码。您可以在this blog找到更多信息。

HTML：

<div class="instaFeedButton">
    <button id="previous-feeds" class="btn-feed"><</button>
    <button id="next-feeds" class="btn-feed">></button>
</div>
<br/><br/>                
<div id="instafeed" class="instagramFeed"></div>

JavaScript：

var nextButton = document.getElementById('next-feeds');
var previousButton = document.getElementById('previous-feeds');
var imgs = [];                          // store the images for caching
var currentPage = 1;
var loadedPage = 1;         //data cached pages    
if (currentPage < 2) {
    previousButton.setAttribute('disabled', 'disabled');
}
var feed = new Instafeed({
    get: 'tagged',
    tagName: 'srilanka',
    clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
    resolution: 'thumbnail',
    limit: 5,
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instagramImg"/></a>',
    after: function () {
        if (!this.hasNext()) {
            nextButton.setAttribute('disabled', 'disabled');
        }            
    },
    cachedPrevious: function () { // read the cached instagram data
        var previousImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
        $("#instafeed").html(previousImages);
    },
    cachedNext: function () {   // read the cached instagram data
        var nextImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
        $("#instafeed").html(nextImages);
    },
    success: function (data) {
        var images = data.data;
        var result;
        for (i = 0; i < images.length; i++) {
            image = images[i];
            result = this._makeTemplate(this.options.template, {
                model: image,
                id: image.id,
                link: image.link,
                image: image.images[this.options.resolution].url
            });
            imgs.push(result);
        }
    }
});

// bind the next button
nextButton.addEventListener('click', function () {
    $("#instafeed").fadeOut(100);
    $("#instafeed").empty();
    $("#instafeed").fadeIn(100);
    currentPage++;
    if (currentPage > 1) {
        previousButton.removeAttribute('disabled');
    }

    // if the data is not already loaded , get the feed by calling instagram api
    if (currentPage > loadedPage) {
        feed.next();
        loadedPage++;
    }
    // if the data is not already loaded , get it from there rather than calling api again 
    else        
        feed.options.cachedNext();
});

// the data will be always there before calling previous button, so take it from cache
previousButton.addEventListener('click', function () {
    currentPage--;
    $("#instafeed").fadeOut(100);
    $("#instafeed").empty();
    $("#instafeed").fadeIn(100);
    feed.options.cachedPrevious();

    if (currentPage < 2) {
        previousButton.setAttribute('disabled', 'disabled');
    }
});

feed.run();

CSS：

.instagramImg{
    height:148px;
    width:148px;
    padding: 0 3px 3px 0;
}

.instagramFeed{
    margin-top:5px;
    min-height:440px;
}

.instaFeedButton{
    float:left;
}

.instaFeedDesc{
    float:left;
}

.btn-feed{
    padding:2px 25px;
}

在这里，我使用了 instafeedjs JavaScript 库，它允许在您需要时（延迟加载）获取提要，并以您需要加载提要的方式进行更多控制。

【讨论】：