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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

3回答

3421閲覧

Angular.jsを使用したサイトでの画像の遅延読み込みについて

chieeeeno

総合スコア217

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

1グッド

5クリップ

投稿2016/04/27 05:30

編集2016/04/29 18:47

Angular.jsを使用して、TwitterやFacebookのようなタイムラインを表示させるようなサイトを作成しています。
現在は、jQueryを使用して、記事情報をjsonから読み込んだり、画像の遅延読み込みを行っているのですが、
jQueryだとメンテナンス性が低いため、Angular1.5ベースでリニューアルを行っております。

jQueryで作っていた現状サイトでは、画像の遅延読み込みをjquery.lazyload.jsを使用しておりました。
【参考サイト】

1.5系だとjQueryのプラグインも使用することは可能といえば可能(邪道ですが・・)なので、
上記プラグインの使用を試みたのですが、相性が悪いのか、使い方が悪いのか、
遅延読み込みを行ってくれず、ダミー画像が表示されたままになります。

実行している部分のコードは以下の様な形になります。

javascript

1$http({ 2 method : 'GET', 3 url : _url, 4 timeout : 5000 5}).success(function(data, status, headers, config) { 6 setTimeout(function(){ 7 //画像遅延読み込み 8 $( "img.lazy" ).lazyload({ 9 threshold: 100 , 10 effect: "fadeIn" , 11 effect_speed: 500 12 }); 13 },1000); 14}).error(function(data, status, headers, config) { 15 16});

できれば、jQueryを使わずにAngular.jsのみで遅延読み込みをしたいのですが、
どのように実装すればよいでしょうか?

jQueryを使った場合でも構わないので、解決方法をご教授いただけるとたすかります。

よろしくお願いします。

【追記】
実際にはJSONデータを読み込んだ直後に$scopeでバインドしていて、
その直後にlazyloadを実行しています。

javascript

1$http({ 2 method : 'GET', 3 url : _url, 4 timeout : 5000 5}).success(function(data, status, headers, config) { 6 setTimeout(function(){ 7 //画像遅延読み込み 8 $( "img.lazy" ).lazyload({ 9 threshold: 100 , 10 effect: "fadeIn" , 11 effect_speed: 500 12 }); 13 },1000); 14}).error(function(data, status, headers, config) { 15 16});
dsk👍を押しています

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

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

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

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

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

tkanda

2016/04/27 08:48

<img> の data-original には $scope を使ってバインドしていますか?それはどのタイミングで?その部分のコードも記載できますか?
guest

回答3

0

ベストアンサー

すでに確認されているかもしれませんが、kentei_syunraiさんが追記されているものを含め、いくつか Angular.js 用プラグインが有るようです。

【GitHub - afklm/ng-lazy-image: Angular directive for loading responsive image when container (which is preventing reflow) is in viewport.】
https://github.com/afklm/ng-lazy-image

【GitHub - Pentiado/angular-lazy-img: Lightweight lazy load images plugin. Only 1kb after gziping. Pure JavaScript, only Angular as dependency.】
https://github.com/Pentiado/angular-lazy-img

【Lazy loading images using AngularJS · Let's develop by Michal Kvasničák】
http://kvasnicak.info/2014/08/04/lazy-loading-images-using-angularjs/

投稿2016/05/01 16:48

kei344

総合スコア69364

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

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

chieeeeno

2016/05/01 17:10

ありがとうございます! ご提案いただいたプラグインを試してみたいと思います!
chieeeeno

2016/05/10 06:11

返信遅くなってスミマセン。 ご提案いただいたプラグインを入れたら解決いたしました。 ありがとうございました!
kei344

2016/05/10 06:16

解決されたようでよかったです。もしよろしければどのプラグインがうまく機能したかを共有いただけませんか?よろしくお願いします。
guest

0

scopeにバインドした値をangular外のサービス、今回であればjQuery。で変更した場合、データバインディングでDOMに反映させるには、その変更をangularへ伝える必要があるのではなかったですか?
$scope.$applyを使い通知するか。angularのサービスである$timeoutで変更処理をラップして、0秒で即時実行するか。
外にいるので実際にコードで試したわけではないですが…
見当違いであればすいません。

投稿2016/05/01 16:44

DaisukeSakai

総合スコア50

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

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

chieeeeno

2016/05/01 17:09

ご返信ありがとうございます。 jQueryを使用する際は$applyで通知する必要があることは知っていたのですが、 angularでDOMに追加されたタイミングでlazyloadを実行して、 追加された要素に対して遅延読み込みをさせるだけだと思っていたので、 angularm側ではDOMの変更などは取得する必要がないので、 applyは必要ないと思っていました。 $timeoutを使ったやり方は思いつかなかったので、 一度試してみたいと思います。 ありがとうございました!
guest

0

下記のサイトに書いている内容では解決しないことでしょうか?(サイト下の方に実装方法も載っています)

【AngularJS】CSSのfilterを組み合わせた画像の遅延読み込みで体感速度を向上させる

※追記
以下のようなものもあるようです。
Angular Lazy Image directive

投稿2016/04/29 06:58

編集2016/04/30 00:39
kentei_syunrai

総合スコア946

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

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

chieeeeno

2016/04/29 18:55

ご返信ありがとうございます。 この記事の内容については試してはみたのですが、 JSONの読み込みが完了した時にJSON内に書かれているすべての画像を読み込みに行く処理の内容になるので、 他の方法を模索していました。 やりたいこととしては、JSONを読み込んだあと、ダミーではなく実際の画像を読み込みに行くのは、 画面の表示領域に入ってから本物の画像を読み込みに行くというしたいのです。 lazyloadプラグインはその辺りをうまく処理して、スクロール時に画面の表示領域に入るタイミングでロードが走ってくれるので、それと同様の処理を実現したいと思っております。
chieeeeno

2016/05/01 17:10

プラグインあったんですね! 試してみたいと思います!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問