新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


まずはこちらを見てください


http://docs.ext-japan.org/docs/

ExtJSのドキュメントサイトです。

うまくできていますね笑

今回はこのローディング機能について調査してみました。

この機能を使用しなければ、ローディング完了するまで先に読み込まれた大量のページ内文字列が表示されてしまうからです。

このままでは汚かったため、この機能を解析して実装してみました。

方法は簡単です

■Javascript

setTimeout(function(){
    Ext.get('loading').remove();
    Ext.get('loading-mask').fadeOut({remove:true});
}, 250);

■HTML

<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator"><img alt="loading" src="/img/icon/extanim32.gif" width="32" height="32"/>Loading...</div>
</div>


上記を追加します。
Javascriptファイルについては、onReady()に追記してください。

本機能を実装してみました。


http://webyoutility.web.fc2.com/


本当は非同期に動作するものが望ましいんですが…
SEO的に問題があるため実装していません、、、
スポンサーサイト

テーマ:Webサービス - ジャンル:コンピュータ

<<Google Adsense Sandbox | ホーム | OpenSocial の Gadget XMLを使ってみよう>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/157-2fa9d8ed
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。