jQueryプラグイン「Lazy Load」が動かない Bootstrapと競合？
またいつもの後輩が悩んでいる。
いつも大げさなリアクションが得意な後輩の話に耳を傾けその会話を楽しみつつ、最後にアドバイスを送るのが日課になっているのだ。
今日のトラブルとは
ページのスクロール幅に応じて、現在ブラウザーに表示されている範囲の画像を、遅延させて読み込み表示する
そうあのjQueryプラグイン「Lazy Load」で、どうやらトラブルになっているらしい。
どれどれ・・・どれどれ・・・
実行。ふーむ。
コンソールにエラーが出力されている訳ではないので、基本的な設置に問題があるのかもしれない。
動作しない時の確認ポイントとして
今流行りのページの下の方で、Javascriptファイルを読み込む設定をしている場合、特に多いエラー原因が
プラグインファイルのロードの前に
<script src="js/jquery.lazyload.min.js"></script>
lazyのメソッドを実行している
$( 'img.lazy' ).lazyload();
この手のミスの場合は、コンソールにエラーが表示されるので、今回の問題では無いのだ。
次に考えられるエラー原因として
imgタグのclassにlazyを追加（ lazyload時に指定しているクラスの追加 ）していない
<img class="lazy"
そして、ここ画像のソース指定はsrcでは無くdata-originalにしなければならない。
<img class="lazy" data-original="xxxxxxx"
ズバリこれでした。
後からlazyプラグインを導入した際に、img srcがあるので、いつもの流れでスルーしてしまいがちになる。
data-originalを追加するのを忘れてしまうのだ。
こう言う安易なミスも、重大な不具合を生むきっかけになるのだと、気を引き締めるようにとアドバイスをし今日もまとめるのだった。
それでも一部の画像がlazy表示されない
Bootstrapのクラスimg-thumbnailとlazyを一緒に使うと、本気で動作しない。
ご丁寧に、本来のsrcとstyleの追加が自動で行われるようだ。
この対応は時間がかかりそうなので、宿題とし自分の仕事に戻るのだった。
