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});
回答3件
あなたの回答
tips
プレビュー