久々の技術投稿。ちょっと詰まったので、今後のためにメモ。
tuupola/jquery_lazyload github
#事案
lazyloadを使う時
$(function() {
$('img.lazy').lazyload();
});
こんな感じで設定しますよね。
今まではこんな感じで大丈夫だったんですが
cssで親要素を無視して、ブラウザ幅いっぱいまで子要素を広げたい
参考：親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテクニック
という時に、bodyに
overflow-x: hidden;
のstyle指定をしました。
そうするとlazyloadが動かなくなった。
#解決方法
$(function() {
$('img.lazy').lazyload({
container: $('body')
});
});
overflowの指定がついた親要素に対してscrollを監視するようにする。
参考：jquery.lazyload.jsの使い方まとめ | cly7796.net
#なぜこんなことになったのか
lazyloadのスクリプトを見てみると
container : window,
と、初期がwindowのscrollを監視している。
overflowにより、windowとは別のスクロールになったことで、通常のスクロールが監視されず、画像が表示されなかった。
のだと妄想している。
追記：bodyにやる必要なかった。
html {
overflow-y: auto;
overflow-x: hidden;
}
とすることで同様の結果を得られる上に、lazyloadでcontainer: $(‘body’)と記述しなくても動作するみたいです！
