JQueryとか私みたいなプログラムできない初心者でも簡単に動きをつけられて、
素晴らしいスクリプトですよね。
そんな私がハマった罠。
ブラウザのバグ？それともプログラムミス？解決した内容を今日はメモです。
今回の問題は…。
JQueryとmatchHeightを使って高さを画像を揃えたら、
Safari(バージョン12.1.X)でのみ、高さを揃える画像のみが表示されない。
という現象。
ついでにこの問題は、画像を遅延読み込みさせるlazyloadも絡んでいました。
safari 12.1.Xでのみ発生し、旧バージョンの12.0.Xでは発生しなかった。
ChromeもFirefoxもIEでも起きなかったです。
では早速、解決方法！
①JSを実行するタイミングを確認する。
$(function(){});
は
$(window).load(function(){}); →JQueryのバージョンが1系、2系
$(window).on('load', function() {}); →JQueryのバージョンが3系はこっち
に書き換える。詳しくがJQuery 処理 タイミングでググるとわかるけど、
1.$(function() {});
2.$(document).ready(function(){});
3.$(window).on('load', function() {});
JQueryを実行して処理をされるタイミングを確認すると、
1と2は同タイミングでDOMが読み込まれた直後にすぐ走る。
この後のタイミングでHTML内の画像やらが読み込まれ、
3はブラウザに表示された後に処理される。ので今回は画像が読み込まれた後じゃないと意味がなかった。。
勉強になるわ・・グーグル先生(´;ω;｀)
次！次！前置きで言った通り、今回はlazyloadが絡んでて画像が表示されない現象。
ブラウザのインスペクターで確認すると、他の要素はmatchHeightで高さがきちんと計算されて、
<div style="height:393px;">とか入ってる。
画像にmatchHeightは使えないのかー？とか考えたけど、再読み込み（リロード）したら直るし。
解せぬ！！！状態。
<img class="lazyload"…>的なものがあったので、これはなんだろうと検索。
lazyloadはとーーーーっても便利な画像遅延読み込みツールなんだな！
とグーグル先生に聞いていたときだった。
ん？？？(。´・ω・)ん?
画像遅延読み込み・・・・。ってことはこれはまだ画像が読み込み終わってないときに、
matchHeight処理されてたらheight:0px;になるのは当然じゃないか？？笑
という事で処理タイミングを見直してみました。
$('.lazyload').trigger('unveil').bind('load', function(){
$('img').matchHeight();
}
解決策
②lazyloadで遅延読み込みさせている画像を表示したら、処理するというタイミングに見直し！
で今回は解決です。
長々とすみません。
イベント処理のタイミングを考えることは、プログラムをする上で大事なことなのだと、
教わったの回でした！！