Pickupニュース

CodePenでJavaScriptの読み込み順エラー
コラム

CodePenでJavaScriptの読み込み順エラー

空のソースを追加して解決?
複数のjavaScriptソースを読み込んで作成したCodePenを埋め込んで表示する際に、うまくJavaScriptが機能しない場合がありました。そのような時の個人的な対処法です。

CodePenが動かない?

lightGalleryのYouTubeサムネイルを表示するデモをCodePenで作成していたのですが、作成時には問題なくても、埋め込み時に正しく機能しない(サムネイルが表示されない)事態が発生しました。

原因は?

どうやら埋め込み時に読み込んでいるJavaScriptの順番が入れ替わってしまっているようでした。
作成時には、
のように、lg-thumnbnail.jsファイルが一番下に位置しているのですが、埋め込み時のソースを確認してみると、
のようにlightgallery.jsよりも上の位置に入れ替わっていました。
このため、lightgallery.jsの前にlg-thumbnail.jsが読み込まれてしまい、サムネイルが表示されないことがわかりました。

解決法(?)

これが根本的な汎用性のある解決法かはわかりませんが、一応問題を回避することが出来ましたのでその方法をご紹介します。

空のJavaScriptソースを追加

CodePenの SettingsJavaScript で、+ add another resourceをクリックして、javaScriptソースを優先的に読み込みたいJavaScriptファイルの下に追加します(入力は不要です)。

一応これで自分の場合は解決しました。
もし同様の問題が起きている方がいらっしゃいましたらお試しください。

コメントを残す

記事ランキング