【JavaScript】window.onloadを使用した時に動かなかった話

ShopifyでJavaScriptを書いている時に、window.onloadを使用していましたが、動かなくなる現象が起こりました。

これは複数のwindow.onloadが記述されている際に、一つしか動作できないことが原因のようです。

Shopifyのテーマでもwindow.onloadを使用しているテーマがあったり、WordPressのテーマでも使用しているテーマがあるので、記述は控えた方がいいと思います。
また、ゼロから構築する際でもチームで構築する際には重複してしまう可能性があるので、お勧めできません。

解決方法

window.onloadを使用したい場合は、以下の2つの方法に書き換えるといいと思います。

window.addEventListener('DOMContentLoaded', function() {
window.addEventListener("load",function() {

2つあるので違いを見ていきましょう

DOMContentLoaded

DocumentオブジェクトはDOMツリーを読み込んでいきます。解析が終わるとDOMContentLoadedイベントが発火されます。

load

DOMツリーの構築が完了した後に、画像が読み込まれていきます。読み込みのすべてが完了するとWindowオブジェクトに対してloadイベントが発火されます。

読み込み速度

以上が2つの違いの説明なのですが、結論、DomContentLoadedの方が速く呼び出される。ということです。
画像の読み込みを待つなどがなければ、DomContentLoadedを使用するので問題ないと思います。

使用例

window.addEventListener('DOMContentLoaded', function() {
    console.log('MoreChoice');
});

window.addEventListener('load', function() {
    console.log('MoreChoice');
});

まとめ

何かご不明点、おかしな点あればご連絡ください。

これ以外にもShopifyテーマのLiquidでのカスタマイズを今後もnoteに投稿していくので、フォローといいねしていただけるとうれしいです。

また、Shopifyの独自のカスタマイズやテーマ開発などのご依頼ございましたら、TwitterのDMよりお待ちしております。

あわせてお読みください

自己紹介

エンジニア経歴

2019.08〜2020.08　カレント自動車株式会社IT事業部インターン
2020.08〜　フリーランスとして、数社の業務委託とShopifyエンジニア, Webエンジニアとして活動
2021.08〜　僕と私と株式会社 Shopify事業部責任者
2022.01〜　石垣島に僕と私と株式会社グループのEC制作会社設立 （代表）

その他経歴

2021　 電動キックボード日本一周
　　　 雑誌「BICYCLE JAPAN」7月号掲載
　　　 渋谷大型スクリーンCM「SWALLOW」出演

SNS

TikTok
85,000フォロワー(2021.09時点)
主に旅について発信

たいと🛴旅する挑戦する人 (@taito_smile) TikTok | Watch たいと🛴旅する挑戦する人's Newest TikTok Videos

Instagram
11,000フォロワー(2021.09時点)
主に旅と生活について発信

Login • Instagram

Twitter
旅とShopifyについて発信

Tweets by taito_smile