ブランディングをお手伝いする福岡のデザイン事務所|ANIK

BLOG

FlexSliderの不具合解消!スライド画像が一瞬全て縦に並んで表示されるバグの対処方法!

ホームページのヘッダ画像でよく使われるjQueryのFlexSlider。

複数の画像を横にスライドさせる動きを簡単に実装できます。

jQueryはプログラム初心者でも簡単にサイトに動きをつける事が出来るので、コピペで使用している方も多いですよね。

でも複数のjQueryを同時に使用すると、思わぬ不具合に遭遇する事も。

今日はFlexSlider導入時に僕が実際に遭遇したトラブルの対処法についてご紹介したいと思います。

 

FlexSliderとは?

楽天のサイトなんかで複数の画像が横にスクロールしている部分がありますよね。

そんな動きを簡単に導入できるのがFlexSliderっていうjQuery。

レスポンシブにも対応しているので、スマホでも利用できます。

プログラミングの知識がなくても簡単に導入できるので、たくさんのサイトで紹介されています。

実際に僕もFlexSliderを使ってみました。

FlexSlideを設置した後、そのページにアクセスした瞬間にスライダーで一つずつ表示される画像が、一瞬全て縦に表示されるという不可解な現象が。

僕が実際に行った対処方法をご紹介しますね。

 

header内の記述を修正

FlexSliderを導入する際、ページのヘッダ内に下記のソースコードを記述します。

このwindows.onloadですが、htmlが全てロードされたあとで処理が実行されます。 全ての画像を全て読み込み終えてから処理を行うので、タイムラグが生じ、一瞬画像が縦に並ぶ不具合が生じます。 このヘッダ内のソースをこちらのソースに変更してみましょう。

document.readyでは画像の読み込みが完了を待たずに処理が実行されるので、先ほど述べた様な不具合がなくなります。

 

まとめ

jQueryって導入方法に関する説明はたくさんのページで紹介されています。

ただ実際に設置してみると、あれこれ不具合がおきることが多いです。

そんな時の対処法に関する情報って、まだまだ少ないなって感じます。

ということで今日は僕が実際にFlexSliderを設置した時に遭遇した不具合の対処法を紹介させていただきました。

最低限のjavascriptの知識は知っておくと、思わぬ事態に遭遇しても対処しやすいです。

焦らずに少しずつ習得していきましょう。

LINEで送る
Pocket

ANIK
1983年生まれ。 独学でデザインを学び、福岡の広告代理店で10年間デザイン業務に携わる。 ホームページ、広告バナー、名刺、商品パッケージ、看板、各種販促ツールのデザインを担当。 2017年よりANIKという屋号でブランディングの総合的なサポートをメインに個人活動を開始。 性格は真面目、温厚で自然が大好きです。