jQueryのスライダーがうまく動かない時の対処方法。(jQueryはbodyの閉じタグの前で読み込まない。)|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

jQueryのスライダーがうまく動かない時の対処方法。(jQueryはbodyの閉じタグの前で読み込まない。)

jQueryはbodyの閉じタグの前で読み込まない。

jQueryのスライダーがうまく動かない時の対処方法。(jQueryはbodyの閉じタグの前で読み込まない。)

スライダーのカスタムを頑張れば頑張るほど動きがカクカクする。

スライダーをカスタマイズして作り込んでいると、動きが不自然となり、スムーズに切り替わらないことがある。

そんなときは、jQueryの読み込み位置を、head内に入れて試してみると良い。自分の場合は長年原因不明だったが、これ一発で改善された。

jQuery本体はhead内に書いて問題ない。

今ではネットや職業訓練校やスクールなど、あらゆるところでjQueryJavaScriptはbodyの閉じタグの直前に書きましょうと言われている。

jQueryを使用したプラグインの配布サイトでもそのような実装例があるのでなおさら混乱する。

ただし、jQueryの公式サイトを見てみると、bodyの閉じタグの前では読み込まれていない。本来の記述場所であるhead内に、jQuery本体だけではなく、他のJavaScriptも普通にどしどしと書かれている。

むしろbodyの閉じタグの前には、WordPressが書き出すJSがあるくらいだ。「docsearch.min.js」というJSもあるが、これはよくわからない。ただその名前から何から、ページのレンダリングには関わらないものだと思われる。

jQuery公式サイトのスピードは?

bodyの閉じタグの前に書くようになった要因として、「ページの高速化」があるが、Googleの PageSpeed Insightsで計測すると、jQuery公式サイトのスピードはかなり早い。

以下、その計測結果として、、、

jQuery公式サイトのページ読み込み速度。(モバイル)

jQuery公式サイトのページ読み込み速度。(パソコン)

参考:jQuery公式サイトjQuery

上記の通り、遅くなっているどころか、かなり速い。


jQueryを使ったその他のサイトでも。

jQueryの公式サイトはスライダーや動画などが無く、画像も少ないから速いのでは?と思うかもしれないが、自分が制作したスライダーや画像が多くあるサイトでも計測してみた。

結果としては、、

画像が多い、当ポートフォリオサイトのスピード。

ポートフォリオサイトなので、必然的に画像をたくさん使っており、動画も1〜2つある。さらにクライアントサイト制作時の実験や検証としても使用、JavaScriptも色々と使用している。

井川のポートフォリオサイト。(モバイル)

井川のポートフォリオサイトの読み込み速度。(パソコン)

参考:当ポートフォリオサイト井川 + デザイン = 🌈

スライダーと動画がある、英会話教室のスピード。

この英会話教室のサイトはスライダーが1つ、動画が2つ、画像も10枚ほど使用している。

マイク英会話教室札幌サイトの読み込み速度。(モバイル)

マイク英会話教室札幌サイトの読み込み速度。(パソコン)

参考:マイク英会話教室札幌 マイク英会話教室札幌 オンラインレッスンページ。

どちらも、全く遅くなく、むしろ速い方と言える。また、CSSのセレクタはクラスセレクタが一番速い、という話もネット上やリアルの現場でも見聞きするが、上記の2つのサイトは普通にIDセレクタや子孫セレクタや属性セレクタなどを使用している。

jQueryも遅いと言われていることがあるが、上記の検証結果により、事実とは言えないことがわかる。jQueryは普通にガシガシと使用している。だが動きはスムーズだ。

他にも提示できるサイトがあるが、3つあれば十分だろう。しかも全て、(これも遅いと言われる)WordPressサイトだ。

もしご参考になれば。

その他、参考メモ:CSSのidセレクタは使ってはいけないって本当なの?


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。