system
マリンロード

2016.11.8HTML/CSS 

マリンロード

bxsliderで一番最後のスライド画像が先頭に表示されてしまうときの対処法

マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

bxsliderを使ってスライダーを実装するフロントエンドの方は多いと思いますが、
先日タイトルにもある不具合が生じました。

結論からいうと、$(document).ready();の中に書いてしまうせいで起きるバグのようです。
バグと言っていいのか謎なところですが。。
要はスライダーが完全に読み込まれる前に実行してしまうから、一番最後のスライド画像が先頭にきてしまうようです。

解決方法としては、

$(window).on(‘load’, function(){
  $(‘.bxslider’).bxSlider();
});

と書けばOK。

bxsliderは前後のスライドも表示させたい時に使ったりします。
これを覚えておかないとページを開いた時綺麗に左右のスライダが表示されないので、ぜひ覚えておいてくださいね。

$(document).ready();に書くのか$(window).on(‘load’);に書くのかの違いが重要なものは他にもまだまだあります。
matchHeightもよく利用するのですが、これも$(document).ready();だと完全に読み込まれる前に実行してしまうため、期待通りに動いてくれません。

jsが苦手だったりまだあまり触れたことがない人は、下記のように当然思うと思います。
「$(document).ready();と$(window).on(‘load’);ってどう違うの?」

これ私も最初曖昧でした。
ですので、簡単に違いをご説明しますね。

■$(document).ready();
 画像の読み込みなどは待たず、 DOMツリーの構築が終わった時点で実行される。

■$(window).on(‘load’);
 画像や他の全てのデータの 読み込みが完了した時に実行される。

非常にざっくりですが。。
要するに、$(document).ready();が先に実行され、その後に$(window).on(‘load’);が実行されるわけですね。

jsは参考サイトなどのものをコピペして使うことも多く、自ら勉強しないとなかなか知識がつかない言語だと思います。
上記のものは多用こそすれ、その違いをよくわかっていなかったりしますよね。
基礎の部分ではありますが、こういうところからしっかり固めていくのが重要だと思います。
今後も精進ですね。

以上、虎澤でした。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ