bxSliderで最後の画像から表示されることがある現象に対処しました。

2024年3月5日2024年4月7日

ホームページ黎明期はトップページにFLASHを埋め込み「つかみ」の役割をしていました。
それも時代とともに、FLASHからJqueryへ役割が変化しました。

bxSliderは画像をスライドさせるJqueryプラグインで、トップページのつかみ部分によく利用されます。
手軽にビジュアル面を強調できるため、重宝します。

ところが今回次のような現象が発生しました。
「ページを開いたときにbxSliderの最後の画像から表示されることがある。」
という現象です。

必ず毎回発生するわけではありませんが、時たま発生します。
今回はこの現象について調査し、対処しました。

今回の内容

現象は次の通りです

現象が必ず発生する状況であれば、調査はやりやすいのですが、今回の現象は出るときと出ない時があります。

bxSliderはスクリプトなので、コードを追っていけばいずれ原因がつかめるかもしれません。
ただ、そのためにはいつ起きるかわからない現象をひたすら待つ必要があります。

さすがに時間がかかるので、まずはググって調べることにしました。
すると、気になる情報を見つけました。

それがこちらです。

今回のソースは以下の通りです。

$(function()
{
	$("#eyecatch ul").bxSlider();
});

$(function()

{

$("#eyecatch ul").bxSlider();

});

ありきたりな記述方法ですが、この記述だとHTMLの読み込みが終わる前にスタートすることがあるというものでした。

つまり、重たいつくりのページの場合、読み込みに時間がかかると現象が発生し、キャッシュ等のおかげで読み込みが早かった場合は、現象が起こらないということでした。

そこで次の記述に変えたところ、現象がぴたりと止まりました。

結論から申し上げますと、次の記述に変更することで現象が全く発生しなくなりました。


$(window).on("load", function()
{
	$("#eyecatch ul").bxSlider();
});

$(window).on("load", function()

{

$("#eyecatch ul").bxSlider();

});

Jqueryの最初の記述をon loadに変えただけですが、これだけで現象が改善しました。
せっかくなのでその理屈について調べてみました。

最初の記述である$(function() は、$(document).ready(function() の省略記述です。
意味的には「HTMLがready状態になったら動作」です。

それに対し、$(window).on(“load”, (function()　はHTMLの読み込みが完了したら動作です。

一見どちらも同じ意味のように思えますが、詳しく調べてみると差異がありました。
それがこちらです。

$(document).ready(function()	HTMLのDOMの読み込みが終わったら動作
$(window).on(“load”, (function()	HTMLの全ての要素の読み込みが終わったら動作

なんかわかるようなわからないような。
DOMって何？

というわけで、さらにわかりやすく表現したものがこちらです。

$(document).ready(function()	HTMLのタグが読み込めたら動作する ※画像ファイル等の読み込みは待たない
$(window).on(“load”, (function()	HTMLのすべてが読み込み終わるまで動作しない ※画像ファイル等の読み込みを待つ

つまり、readyはon loadより先に動作します。
readyは、画像が読み込みできていなくても動作します。

bxSliderは画像の要素についても操作するため、画像読み込み完了前に動作すると誤動作する可能性があります。

だから、現象が発生したり、しなかったりしていたのです。
それに対し、on loadは画像の読み込みが完了してから動作するため、現象が発生しなくなったのです。

詳しく調べてみると、なるほどと思える答えにたどり着きました。

ちなみにDOMとはJavascriptが動作するためのAPI(機能)です。
DOMは、タグが読み込み完了していないと誤動作します。
readyとは、DOMが動ける状態になったら動作という意味なのです。