画像遅延により、jquery.matchHeight.jsがうまく反応しない。

2020/02/05 03:54

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、再現可能なコードもコードブロックで質問文に追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

2020/02/05 04:35 編集

ご指摘ありがとうございます。質問文にURLと、再現可能なコードも追加しました。 lazysizesと jquery.matchHeight.js に関しては、コードが長く、入りきらなかったため、 https://codepen.io/satoru1993/pen/OJVLwGz 上記にて、再現したものを用意し、そちらにlazysizesと jquery.matchHeight.jsのjsコードも入れました。何卒宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

lazysizesが用意しているlazybeforeunveilイベントを待って、そのたびにmatchHeightを実行すれば多分いけると思いますが、提示のコードのような構成ならmatchHeightを使用せずul要素をflexにすればよいと思います。

【lazysizes/README.md at gh-pages · aFarkas/lazysizes · GitHub】
https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md#js-api---events

CSS
1ul {
2    max-width: 960px;
3    width: 100%;
4    overflow: hidden;
5    margin: 0 auto;
6    display: flex;
7    flex-wrap: wrap;
8}

投稿2020/02/05 04:50

総合スコア69407

2020/02/05 04:59 編集

ありがとうございます！確かにこちらでも解決できるかもしれないです。ただ、今作っているサイトが、matchHeightを全ページにあてているため、もし可能なら、matchHeightでやりたいと考えております。matchHeightを使っての場合のやり方に関して、お知恵を貸していただけることはできるでしょうか？お忙しいところ恐縮ですが、お知恵を貸していただけますと幸いです。何卒宜しくお願い致します。

2020/02/05 05:01

> お知恵を貸して回答の最初に書いた物は確認していないのでしょうか。もし提示したものの使い方がわからないとしたら、matchHeightを使用しないという選択肢のほうが妥当だと思います。

2020/02/05 05:16

申し訳ございません。いただいたものを確認して、はじめ理解ができず、投稿致しましたが、先ほど理解でき、実装することができました。いろいろと至らない点で、困らせてしまい、申し訳ございませんでした。無事解決いたしましたので、ベストアンサーにさせていただけたらと思います。

行動規範の内容に同意します

imgのすべてがloadを終わるのを待つとか？

投稿2020/02/05 04:34

総合スコア114825

2020/02/05 04:54 編集

$(function(){ var d=[]; $('img').each(function(x){ var self=$(this); d[x]=$.Deferred(); $(this).on('load',function(){ d[x].resolve(self.prop('naturalHeight')); /*修正*/ }); }); $.when.apply(null,d).then(function(...height){ console.log(height); console.log("ここで実行"); }); });

2020/02/05 04:36

ご回答くださりありがとうございます。申し訳ございません。知識不足で、上記のコードをどこに入れるかをご指導いただけますと幸いです。

2020/02/05 04:38

「ここで実行」のところにmatchHeight？の実行を書いてください

2020/02/05 04:42

$(function(){ var d=[]; $('img').each(function(x){ var self=$(this); d[x]=$.Deferred(); $(this).on('load',function(){ d[x].resolve($('img').index(self)); }); }); $.when.apply(null,d).then(function(...arg){ console.log(arg); console.log($(function() { $('#sample li').matchHeight(); });); }); }); 上記の認識であっているでしょうか？こちらだと、画像が表示されなくなりました…

2020/02/05 04:46 編集

To: yambejpさん提示のコードではページ内の全imgが対象になりますが、lazysizesの機能的に表示エリア前後で読むような実装になっているのではと思います。（コメントが増えていたので宛名を追記しました）

2020/02/05 04:54 編集

いやぁ・・・そう読みますか $.when.apply(null,d).then(function(...arg){ console.log(arg); $('#sample li').matchHeight(); で、お願いします。私の修正したサンプルをみればこの時点でheightが取れていることはわかると思います（matchHeightがどう動くは知りません）