Instagram APIで取得した画像の読み込み方法

下記方法でInstagramの画像の取得しています。
http://qiita.com/redamoon/items/917ba43ddff9d91102bf

枚数が多いため、下記2パターンでの順次読み込みを行いたいです。

(1)画像を遅延読み込みさせる
http://www.appelsiini.net/projects/lazyload

(2)特定枚数づつボタンなどをトリガーに順次読み
http://black-flag.net/jquery/20120523-3848.html

その他の方法でも構いませんので、ご教授頂きたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

提示いただいたプラグインは使用したことがないので、超簡単なサンプルということで。
あとはまぁよしなに。。。

レスポンス中のdata.pagination.next_urlに次のページを引っ張るのがレスポンスされているので、それを引き回しています。たぶんもっといい実装方法があると思いますので、他のかたのご意見を待ちましょう。

lang
1var url = "https://api.instagram.com/v1/tags/cat/media/recent?count=3"
2
3$(initFunc);
4
5function initFunc(){
6  hoge();
7}
8
9function hoge(){
10  $.ajax({
11    url: url,
12    data: { access_token: "your-token" },
13    dataType: "jsonp",
14    error: function(jqXHR, textStatus, errorThrown) {
15      $(".instagram").text(textStatus);
16    },
17    success: function(data, textStatus, jqXHR) {
18      url = data.pagination.next_url;
19      for (var i = 0, length = 5; i < length; i++) {
20        var d = data.data[i];
21        $(".instagram").append(
22        $("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.thumbnail.url))));
23        }
24
25      }
26  });
27};

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>フォトギャラリー</title>
6</head>
7<body>
8<div class="instagram"></div>
9<script src="http://code.jquery.com/jquery.js"></script>
10<script src="instagram.js"></script>
11<button id="button" onclick="hoge()">next_page</button>
12</body>
13</html>
14

投稿2015/03/23 16:23

編集2015/03/24 12:05

kenixi

総合スコア91

castail

2015/03/24 02:05

頂いた内容で確かに読み込みが出来ました！ただこちらはデフォルトの初期表示では画像が表示されないようなので、その場合でも特定枚数画像を表示したいのですがどうすれば良いでしょうか？何度も大変恐縮ですが、こちらさえ解決すれば希望通りになるため何卒ご回答の程よろしくお願いいたします。

castail

2015/03/24 02:25

何度も申し訳ありません。。追加でもう一点のみご確認です。途中で特定の画像までしか読み込まず「parsererror」となるのですがこちらもご教授願えますでしょうか？よろしくお願いいたします。

kenixi

2015/03/24 12:06

コード修正しときました。 parsererrorはちょっとこっちで確認できなかったので、エラー情報とか教えてもらえると対応できるかもです。

castail

2015/03/25 13:18

ご連絡が遅くなり大変申し訳ございません。ご親切に度々ご回答頂きありがとうございます。修正頂いたコードで初期表示はうまく行きました！ parsererrorの件なのですが下記状況です。 (1)初期枚数は正常に表示 (2)hogeボタン押下 (3)間を抜かして最古のグループが表示される (4)hogeボタン押下 (5)「parsererror」エラー文が表示される具体的には、 10枚ずつ表示設定、全27枚ずつの場合 (1)最初の10枚は正常に表示 (3)間を抜かして21〜27枚目が表示される状態です。このご説明でお分かりになりますでしょうか？こちらの不具合も含め、末尾のグループが表示された場合、ボタンは表示しないようにするにはどうしたらよいでしょうか？何度もご質問して、誠に恐縮ですがご回答頂ければ幸いです。よろしくお願いいたします。

行動規範の内容に同意します

APIからのレスポンスに次を読み込むためのURLがレスポンスされるので、それを投げちゃえば取得できると思います。

投稿2015/03/23 14:35

kenixi

総合スコア91

castail

2015/03/23 14:53

ご回答頂き誠にありがとうございます。大変恐縮ですが、当方プログラミング初心者のため、ご指導頂いた内容をどう記述すればいいかが分かりませんでした。現在下記の通り記述しているのですが、具体的に修正・追加点をお教え願えませんでしょうか？ = <script type="text/javascript"> $(function() { $.ajax({ url: "https://api.instagram.com/v1/users/self/media/recent", data: { access_token: "XXXXXXXXXXXXXXXXX" }, dataType: "jsonp", error: function(jqXHR, textStatus, errorThrown) { $(".instagram").text(textStatus); }, success: function(data, textStatus, jqXHR) { $(".instagram").text(""); for (var i = 0, length = 100; i < length; i++) { var d = data.data[i]; $(".instagram").append( $("<li>").append($("<img>").attr("src", d.images.low_resolution.url).attr("width", 306) .attr("height", 306)));} } }); }); </script> = よろしくお願いいたします。

行動規範の内容に同意します

あなたの回答