質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

5060閲覧

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

castail

総合スコア117

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2015/03/23 05:02

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

レスポンス中の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枚目が表示される 状態です。 このご説明でお分かりになりますでしょうか? こちらの不具合も含め、 末尾のグループが表示された場合、 ボタンは表示しないようにするにはどうしたらよいでしょうか? 何度もご質問して、誠に恐縮ですが ご回答頂ければ幸いです。 よろしくお願いいたします。
guest

0

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> = よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問