バグ修正：はてなブログ用スライダー改訂版

前記事で公開した「はてなブログ用スライダー改訂版」にバグがあります。

バグと言いますか、私の知識不足ではあるのですが（ペコリ）、本体の Javascriptではなく、記事内に書くスライダーの呼び出しスクリプトに問題があります。

<!-- idはオプションのidと一致させれば任意 -->
<div id="myslider">
[f:id:ausnichts:20171113140837j:plain]
[f:id:ausnichts:20171113140931j:plain]
[f:id:ausnichts:20171113140911j:plain]
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var slider = new imzSlider({
    id: 'myslider',
    arrows: true
  });
});
</script>

ここの new でスライダーコンストラクタを呼び出している呼び出し方が間違っています。

document.addEventListener("DOMContentLoaded", function() {

のイベントターゲットが document では動かないブラウザがあるようで、window にすべきです。

また、本体のスクリプトをフッタに入れていますので、呼び出しを HTMLドキュメント読み込み完了時の DOMContentLoaded でいけるかと思ったのですが、おそらく CSSファイルが読み込まれていないせいなのかうまくスライド画像が表示されない場合があります。

ということで、こうなりました。

<!-- idはオプションのidと一致させれば任意 -->
<div id="myslider">
[f:id:ausnichts:20171113140837j:plain]
[f:id:ausnichts:20171113140931j:plain]
[f:id:ausnichts:20171113140911j:plain]
</div>
<script>
window.addEventListener("load", function() {
  var slider = new imzSlider({
    id: 'myslider',
    arrows: true
  });
});
</script>

スライド画像が多い場合にそれらが一瞬表示される場合がありますが、これは次回解消できるはずです。