Folioscope

プログラミング/Unix系/デザイン/CG などのメモがもりもり

オサャレなWebページ切り替え

Webページをスマートかつお洒落な方法で切り替える方法を哲学
ページをローディングするのはもう古いかなと

あらかじめHTML内に全てのページを埋め込んでおき, ボタンを押されると可視状態を切り替える方法がある.*1
しかしこの方法だと, ページのソース量が多くなり, また動的な情報には弱い
特にブログなどは, 全ページなんて読み込んでられない


jQueryを使って, 画像をウニョンッ☆と表示するのを思い出した.*2
この場合, 画像を動的に読み込んでいる
またjQueryでは, htmlも動的に読み込めるみたい


ということで作ってみた.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
  <head>
    <title>Load page sample</title>
    <style type="text/css">
      <!--
        .loading{
          background-image:url('loading.gif');
          background-repeat:no-repeat;
          background-position: center;
        }
      -->
    </style>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      <!--
        $(function() {
          $('#button').click(function() {
            $('#loader').empty().addClass('loading').show();
            $('#loader').load("data.html", function() {
              $(this).removeClass('loading');
              $(this).hide();
              $(this).fadeIn();
            });
          });
        });
      // -->
    </script>
  </head>
  <body>
    <button id="button">Load Page!</button>
    <div id="loader" style="height:800px"></div>
  </body>
</html>

ボタンを押すと, div#loaderにdata.htmlがロードされます.
ページのロード中はloading.gifが表示されます.
ただhtmlは画像などと比べてサイズが小さく, loadingの画面が一瞬しか表示されないのでいらないかもね

*1:http://www.sunsean.com/idTabs/

*2:http://www.huddletogether.com/projects/lightbox2/