Question

我正在开发一个时尚广告的Instagram Feed，Instagram用户可以使用常用标记对照片进行哈希标记。该脚本基于Instagram API，然后将所有带有此常用标记的帖子提取到网页上。

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

如果有人能够阐明我将如何解决这个问题，那将是非常棒的。关于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>

Answer 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库，可以随时根据需要获取Feed（延迟加载），并且可以按照加载Feed的方式进行更多控制。

将分页或延迟加载添加到Instagram Feed

1 个答案: