javascriptや画像の遅延読込をするにあたって、onLoad周辺の実行順序を調べたので備忘録
window.onload = function(){ console.log('window.onload 1'); } window.onload = function(){ console.log('window.onload 2'); } window.addEventListener('load',function(){ console.log('window.addEventListener load'); $(function(){ console.log('window.addEventListener load > $(function(){})'); }) }); $(function(){ console.log('$(function(){})'); }); window.addEventListener('DOMContentLoaded', function(){ console.log('window.addEventListener DOMContentLoaded'); });
結果
DOMContentLoaded
↓
window.addEventListener DOMContentLoaded
↓
$(function(){})
↓
onLoad ※googleの速度計測はここまで
↓
window.onload 2
↓
window.addEventListener load
↓
window.addEventListener load > $(function(){})
※console.log('window.onload 1');は後記によって上書きされたため実行されない。