onload ? ready ? 実行される順番のこと。

onload ? ready ? 実行される順番のこと。

ブラウザが読み込みしている間に、

ローディングなう。のアニメーションを表示させ

 

 

メインビジュアルはふわっとフェードインしながら

走馬灯のように

PCとスマホ、それぞれに合った画像をスライド

 

 

一定位置までスクロールすれば

見えなかったボタンがもわっと出現

ボタンを押すと、遠慮がちにメニューが出てきて

出ては隠れ

 

 

そして右から左へ

流れては消えてゆく売れ筋商品のカルーセル

 

 

 

押すとふんわり優しく

上部へとスクロールしていく、ヘッダに戻るボタン

 

 

 

 

無駄に改行して行間があくと、意味のない言葉でも意味深な感じがしますね。

 

ローディングアニメーション、スライダーにカルーセル、ボタンを押してからのアクションなどなど。

一連のよくある仕掛けをあれもこれも盛っていくと・・

 

たいへん!

動かなくなっちゃった!

画面が真っ白だよー!

 

そんなときは、実行タイミングも気にしてみると◎です。

泣きたいときには是非読んでください。

 

 


本題:onload と ready って違うの?

onload は JavaScript のイベント、ready は jQuery のメソッド。

 

ready()メソッド

DOMツリーの構築が完了した時点で処理を実行する。

 

onloadイベント

DOMツリーの構築だけでなく、画像やスタイルなどの読み込みが完了しないと処理を実行しない。

 

 

処理の実行タイミングが異なります。

順番は「ready」>「onload」になりますが、その前に。

 

DOMツリーってなんでしょう。

 


DOMツリーってなんですか?

DOM(Document Object Model)って毎日見てるあれです。

いつもお世話になっている検証ツールですが・・

これがDOMです。そう。HTML。

 

ブラウザはHTMLから作られたDOMというAPIを使って画面を表示させ、そのAPIを使って「onclick」とか「onload」とか、JavaScriptのイベントの操作をします。

 

DOMがノードという要素で構成されていて、親子・兄弟関係(sectionの中にdivがあってpがあって・・のように、elementとタグみたいな感じ)で階層構造になっているから「DOMツリー」。

 

例えば「このbuttonタグをクリックしたら」とか「スクロールしたらdivを表示させて・・」とか、HTMLをjsで処理する感じで

ブラウザはこんなことしています ↓

 

何かの折に作った図ですがちょうどいいので再利用しました。

 

話は戻って onload と ready 。

 


onload と ready を一緒に書いてみる

一緒に書いたらどうなるんでしょうか。

 

window.onload = function(){
alert('onloadはjsだよ');
}

$(function(){
alert('readyはjQueryだよ');
});

 

上の処理を実行すると、「readyはjQueryだよ」→「onloadはjsだよ」の順に表示されます。

 

※ 「$(function(){ 」は「$(document).ready( function(){ 」の略だよ。

 


onload を続けて書いてみる

 

window.onload = function(){
alert('たらこ');
}

window.onload = function(){
alert('明太子');
}

 

アラートは「明太子」。最後に書いたものが実行されます。

 


ready を続けて書いてみる

 

$(function(){
alert('たらこ');
});

$(function(){
alert('明太子');
});

 

たらこ → 明太子の順に実行されましたが、たらこと明太子、どっちもすきです。

ほかほかの炊きたてご飯と一緒に食べたい。

 

 

たまに「実装したんだけど動かないよー!」という問い合わせが来るので書きました。

サイト見てませんが、おそらく同じ要因なのかなー、と思ってます。

 

最初から順番に実装できれば気が付きやすいですが、後付けで盛っていくことも多いと思うので・・いろいろとぐちゃぐちゃになっちゃいますよね。

 

考えられることとしては、


・書き間違い(閉じ忘れ、全角になってるなど。特に空白とか)

→チェックできるエディタを使うと解決です
・そもそもファイルの読み込みができていない(ファイルがないとかパスの間違いとか)
・実行される順番とか ←今回のはこれだよ!

こんな感じでしょうか。

 

 

なんかおかしいときも、おかしくないときも、作業するときには必ずブラウザの検証ツールで「コンソール」からエラーチェックすると◎。捗ります。

 

 

 

 

share on