質問: Angular.jsを使用して、TwitterやFacebookのようなタイムラインを表示させるようなサイトを作成しています。 現在は、jQueryを使用して、記事情報をjsonから読み込んだり、画像の遅延読み込みを行っているのですが、 jQueryだとメンテナンス性が低いため、Angular1.5ベースでリニューアルを行っております。 jQueryで作っていた現状サイトでは、画像の遅延読み込みをjquery.lazyload.jsを使用しておりました。 【参考サイト】 1.5系だとjQueryのプラグインも使用することは可能といえば可能(邪道ですが・・)なので、 上記プラグインの使用を試みたのですが、相性が悪いのか、使い方が悪いのか、 遅延読み込みを行ってくれず、ダミー画像が表示されたままになります。 実行している部分のコードは以下の様な形になります。 ``` $http({ method : 'GET', url : _url, timeout : 5000 }).success(function(data, status, headers, config) { setTimeout(function(){ //画像遅延読み込み $( "img.lazy" ).lazyload({ threshold: 100 , effect: "fadeIn" , effect_speed: 500 }); },1000); }).error(function(data, status, headers, config) { }); ``` できれば、jQueryを使わずにAngular.jsのみで遅延読み込みをしたいのですが、 どのように実装すればよいでしょうか? jQueryを使った場合でも構わないので、解決方法をご教授いただけるとたすかります。 よろしくお願いします。 【追記】 実際にはJSONデータを読み込んだ直後に$scopeでバインドしていて、 その直後にlazyloadを実行しています。 ``` $http({ method : 'GET', url : _url, timeout : 5000 }).success(function(data, status, headers, config) { setTimeout(function(){ //画像遅延読み込み $( "img.lazy" ).lazyload({ threshold: 100 , effect: "fadeIn" , effect_speed: 500 }); },1000); }).error(function(data, status, headers, config) { }); ```
回答: すでに確認されているかもしれませんが、kentei_syunraiさんが追記されているものを含め、いくつか Angular.js 用プラグインが有るようです。 【GitHub - afklm/ng-lazy-image: Angular directive for loading responsive image when container (which is preventing reflow) is in viewport.】 【GitHub - Pentiado/angular-lazy-img: Lightweight lazy load images plugin. Only 1kb after gziping. Pure JavaScript, only Angular as dependency.】 【Lazy loading images using AngularJS · Let's develop by Michal Kvasničák】