twitter風のデータロード画面を作成した時にはまったので対処メモ
環境はruby-1.9.3-p0, rails3.2.2, postgres, Twitter Bootstrap v2.1です。
難易度★★★☆☆
rails3でtwitterのように画面をスクロールしてデータを自動ローディングするには、
jquery.pagelessを使うのがお薦めです。
しかし、jquery.pagelessを利用する場合には、ファイルの配置場所に注意する必要があります。
Twitter Bootstrapと連携する時に少しはまってしまったのでメモを残します。
スクリプトは最後に置く
WEBページでプログレッシブ・レンダリング（ページを徐々に読み込むこと）を実現するには、なるべくページの下でスクリプトファイルを読むようにします。
なぜなら、スクリプトは下に配置した全てのコンテンツをブロックします。つまり、コンテンツのダウンロードもコンポーネントのダウンロードも中断されることになります。
逆にスクリプトをページの下に配置すれば、より多くのコンテンツが中断されずに逐次的にレンタリングされるようになります。
Twitter Bootstrapでは、bootstrap.jsを指定します。このスクリプトファイルはページの下で読むべきスクリプトファイルです。
しかし、jquery.pageless.jsはページの下で読んではいけません。cssリンクの下で読むようにしないといけません。レンダリングの前にスクリプトを読む必要があります。そうでない場合、レンダリングに失敗してしまいます。
jquery.pageless.jsとbootstrap.jsの配置の仕方
画面を正常にレンダリングするには、以下のようにします。
変更前<head> <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body> // something <script src="/javascripts/jquery.min.js" type="text/javascript"> </script> <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script> </body>変更後
<head> <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> <script src="/javascripts/jquery.min.js" type="text/javascript"> </script>// head内でダウンロード <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>// head内でダウンロード </head> <body> // something <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> </body>
上のようにすることで、jquery.pageless.jsが正常に作動します。
以上です。
参考書籍
この記事がお役にたちましたらシェアをお願いします
0 件のコメント:
コメントを投稿