lazyloadを使って画像の高さを取得する方法

Question

lazyloadを使って画像の遅延読み込みをさせています。
ただ読み込んで表示するやり方だと高さ取得の時間によって
アンカーリンクのずれなどがあり、これを解消できないかと考えています。

$(function() {
	$(".lazyload").lazyload({
		effect: 'fadeIn',
		effectspeed: 1000,
		event: 'sporty',
		//failure_limit: 100,
		threshold: 200
	});
});

ホテルオークラの実装がまさに理想な形で、imgのdata属性を取得してページ読み込み完了時にimg要素の高さがheightで出ています。
https://theokuratokyo.jp/letter/

同じ処理ができたらと思うのですが、
わかる方ご教授いただきたいです。

Answer 1

imgのdata属性を取得してページ読み込み完了時にimg要素の高さがheightで出ています。

サーバ側で既に取得されているので、jQueryで同じことはできません。サーバ側の言語で処理しましょう。

Comments

[s0h5511]

ご回答ありがとうございます。
jQueryでしていると思ったのですが・・。サーバ側の言語とはどういうことですか？

[kei344]

出力されたHTML（ブラウザで「ページのソースを表示」）に既に画像サイズが書かれているので、その画像サイズの取得自体をサーバ側で行っていると思われます。

[s0h5511]

data-width、data-heightはソースに書かれていますが、ロード時にwidthとheightが出力されています。

[kei344]

<img class="lazy_load" data-origin="/assets/images/letter/wine-article02.jpg" data-width="182" data-height="114" src="/assets/images/letter/wine-article02.jpg" style="opacity: 1;" width="100%">
画像には特に指定されていないようですが、どのブラウザでどこの部分を確認されていますか？（ブラウザによって挙動が違う場合があるかもしれないので）

[s0h5511]

ページのソースを表示ではわからない挙動なので、chromeのElementsタブで見ています。
lazyの記述がある要素の位置までスクロールせずに要素にカーソルを当ててソースを見るとwidthとheightが出力されてると思います。

[kei344]

確かにwidthとheightは指定されていました。ただ、ネットワークパネルを見たらわかると思うのですが、表示されていないタイミングでは画像自体の呼び出しをしていません。そのため、JavaScriptで画像を読み込んで幅高さの取得しているのではなく、HTML出力時のdata-width/data-heightを利用していると思われます。