HOME>WEBプログラム覚書>[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。

[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。

入門記事の多くで、基本的に $(function(){}); にコード書けと言われますが、 window.onloadを使ったほうが良いケースも結構あります。

たとえば、

  • 画像を含む要素の高さを取得したい。
  • CSSで設定された結果に対して何らかの操作をおこないたい。

とか。

ページロード時のイベント

通常ブラウザでページがロードされて表示されるまでに、発生する主なイベントは2つあって(もっとあるんだろうけど)DOMツリーの構築が完了して安全に操作ができるようになった段階で発生するのがDomReady、 外部リソースの読み込み、CSSのレンダリングが完了した時点で発生するのがWindowのloadイベント。 (実際にはDomReadyというイベントはなくて、ライブラリがdocument.readyStateを見ていけるぞと思ったら発生させるのがDomReadyと呼ばれてるっぽい?)

僕はつい最近までdomreadyもwindow.loadも同じだと思ってましたが 上記のような違いがあるようです。

という事で、どんな感じか試してみます。

テスト

HTML/Javascript

画像を含む要素の高さをdomreadyとwindow.loadのタイミングで取得する。 実行結果

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jQuery DomReady</title>
  6.  
  7.     <style type="text/css">
  8.         .box {
  9.             display: inline-block;
  10.             padding: 16px;
  11.             border: 1px solid #CCCCCC;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- ここの要素の高さを取得する -->
  17.     <div class="box">
  18.         <h1>やてません</h1>
  19.         <a href="http://pixabay.com/ja/%E3%82%84%E3%81%A6%E3%81%BE%E3%81%9B%E3%82%93-%E6%97%A5%E6%9C%AC-%E5%BA%97-65714/"><img src="/storage/codes/jquery_ready/and-rest-of-65714_640.jpg" /></a>
  20.         <p>
  21.         パブリックドメインで割と品質がいい<a href="http://pixabay.com/ja/">pixabay.com</a>は最高だけど、<br />
  22.         たまに他のフォトストックサイトで見たのも混じってる気がするんだけど大丈夫かな。
  23.         </p>
  24.     </div>
  25.  
  26.     <!-- ここに出力 -->
  27.     <div id="output"></div>
  28.  
  29. </body>
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  31. <script>
  32. /**
  33.  * 画像を含む要素の高さをdomreadyとwindow.loadの
  34.  * タイミングで取得する。
  35.  */
  36. // DomReady
  37. $(function(){
  38.     $('#output').append($('<p>', {
  39.         text: 'jQuery(fn)で取得できる高さ: ' + $('.box').outerHeight()
  40.     }));
  41. });
  42.  
  43. // Window.load
  44. $(window).on('load', function(e){
  45.     $('#output').append($('<p>', {
  46.         text: 'window.loadで取得できる高さ: ' + $('.box').outerHeight()
  47.     }));
  48. });
  49. </script>
  50. </html>

確かに違いがでます。 出来ない出来ないと宣ってしまったWebFont利用時の高さとか横幅もwindow.loadを利用すると取得できます。

HTML/Javascript

CSSでWebfontを設定した場合のテキストの幅の取得。 実行結果

  1. <!DOCTYPE html>
  2. <html lang='ja'>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <link href="http://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" type="text/css" />
  6.     <style>
  7.     h1 {
  8.         font-family: Audiowide;
  9.         font-size: 800%;
  10.     }
  11.     </style>
  12.     <title>WebFonts Width</title>
  13. </head>
  14. <body>
  15.     <h1><span>WebFonts</span></h1>
  16.     <div id="output"></div>
  17. </body>
  18.  
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  20. <script>
  21.  
  22. $(function(){
  23.     $('#output').append($('<p>', {
  24.         text : 'jQuery(fn)で取得できる幅: ' + $('h1 span').width(),
  25.         width: $('h1 span').width(),
  26.         css  : {
  27.             background: 'red',
  28.             color     : 'white'
  29.         }
  30.     }));
  31. });
  32.  
  33. $(window).on('load', function(e){
  34.     $('#output').append($('<p>', {
  35.         text : 'window.loadで取得できる幅: ' + $('h1 span').width(),
  36.         width: $('h1 span').width(),
  37.         css  : {
  38.             background: 'blue',
  39.             color     : 'white'
  40.         }
  41.     }));
  42. });
  43. </script>
  44. </html>

WebFontさんごめんなさい。

投稿日 2012年12月 6日 03:45
カテゴリ JavaScript
タグ CSS3 | jQuery | WebFonts
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1310

コメント

DOMContentLoadedでググるといいかも

コメントする
Name
Email Address
URL