google feed api と jquery

google feed api で複数のRSSを読み込んで、jquery.vgrid.js を利用して、積み木のようなグリッドレイアウトのページを制作中しています。

静的htmlでは、jquery.vgrid.jsが正常にどうさするのですが、
google feed api で生成されたhtmlに対しては、jquery.vgrid.js が機能しません。
jquery系の他のライブラリもためしましたが、同様に動作しませんでした。

google feed api などで、生成されたhtmlに対して、jqueryは動作しないのでしょうか？

No.1 ベストアンサー 回答者： fujillin 回答日時： 2012/10/25 18:47

想像だけの回答ですが…

実行のタイミングをきちんと制御できていますか？
google feed apiで読込まれた後に処理するように作成されていないと、対象がまだ存在しないので、見かけ上は動作していないように見えると思います。
外部から読込む処理を行なう際にはタイムラグがあるので、必ずcallbackの中で処理するようにしないと、ご質問のような事象が起きることになります。


対応なさっていれば、原因は別にあると思われますので、スルーしてください。

この回答への補足

なるほど、google feed apiの処理が終わる前にjquery.vgrid.jsが実行されてしまうのが原因なのですね。
jquery.vgrid.jsの実行には、以下のスクリプトを記述しています。

<script type="text/javascript">
//<![CDATA[
$(function(){
var vg = $(".list").vgrid({
easing: "easeOutQuint",
useLoadImageEvent: true,
time: 400,
delay: 20,
fadeIn: {
time: 500,
delay: 50
}
});
$(window).load(function(e){
vg.vgrefresh();
});
});
//]]>
</script>

これを google.setOnLoadCallback(); をくくって、

google.setOnLoadCallback(

//<![CDATA[
$(function(){
var vg = $(".list").vgrid({
easing: "easeOutQuint",
useLoadImageEvent: true,
time: 400,
delay: 20,
fadeIn: {
time: 500,
delay: 50
}
});
$(window).load(function(e){
vg.vgrefresh();
});
});
//]]>

);

と記述するちよいのでしょうか？

、、、、ためしてみましたが、、、動きませんでした。
よく見てみると、google feed api のスクリプトの最後に

google.setOnLoadCallback(initialize);

と記述がありました。これが影響しているのでしょうか？

補足日時：2012/10/25 20:17

この回答へのお礼

$(function(){
var vg = $(".list").vgrid({
easing: "easeOutQuint",
useLoadImageEvent: true,
time: 400,
delay: 20,
fadeIn: {
time: 500,
delay: 50
}
});
$(window).load(function(e){
vg.vgrefresh();
});
});

上記だけを google feed api のコードの最後の方に入れ込んだところ、
正常に動作しました。
ありがとうございました！

お礼日時：2012/10/25 20:40