Wp-rocket: LazyLoadとJetPackの画像比較ブロックの互換性

作成日 2020年12月03日 · 4コメント · ソース: wp-media/wp-rocket

問題を送信する前に、次の手順を完了していることを確認してください。

最新バージョンを使用していることを確認してください-はい
検索機能を使用して、バグが以前に報告されていないことを確認しました-yes

バグを説明する
JetPack Compare Imageブロックで追加した場合、画像は表示されません。
マークアップがカットされているため、要素を検査するとピクセルsvgのみが表示され、画像ソースは表示されません。
スクリーンショット：
LazyLoadを無効にした場合： https ：//jmp.sh/O7wBHsF
LazyLoadを有効にした場合： https ：//jmp.sh/ZOZZB7N

再現するには
動作を再現する手順：

CompareImageブロックを使用して投稿を作成します。
WPロケットでLazyLoadを有効にする
ページを開くと、次のスクリーンショットのように画像が表示されません： https ：

予想される行動
画像は次のように表示する必要があります： https ：

現在の解決策
LazyLoadオプションからクラス名class="image-compareを除外します。
LLが適用される前にソースコードのマークアップをブロックする： https ：

追加のコンテキスト
Compareブロックは、JetPackの遅延読み込みとWordPressコアの遅延読み込みで機能します。これは、画像が実際には遅延読み込みされていない、つまり除外されているためです。

関連チケット： https ：
Slack： https ：

おそらく、このLazyLoad除外を自動的に追加することは、私たちの側からの解決策になるでしょうか？
または、互換性はJetPackで行う必要がありますか？

バックロググルーミング（WP Media開発チームのみが使用）

[]問題を再現する
[]根本原因を特定する
[]ソリューションのスコープ
[]労力を見積もる

[XS] lazyload medium bug

ソース

NataliaDrause

最も参考になるコメント

@arunbasillal私の観点からは、数分でQAを開始します

piotrbak 2021年01月15日

🚀2

全てのコメント4件

問題を再現する✅

地元のテストサイトで再現

根本原因を特定する✅

ソースコードに見られるように、プラグイン自体から生成されたコードは正しいです。

<img id="1756" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20801'%3E%3C/svg%3E" alt="" width="801" height="801" class="image-compare__image-before" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg"/>
<noscript>
    <img id="1756" src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg" alt="" width="801" height="801" class="image-compare__image-before"/>
</noscript>
<img id="1757" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20800'%3E%3C/svg%3E" alt="" width="801" height="800" class="image-compare__image-after" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg"/>
<noscript>
    <img id="1757" src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg" alt="" width="801" height="800" class="image-compare__image-after"/>
</noscript>

この問題は、比較スクリプトが開始された後に発生し、レイジーロードされたマークアップでは正しく機能しません。

ソリューションのスコープ✅

RocketLazyload\Images::getExcludedAttributes()の除外にimage-compare__を追加すると、それらの画像がlazyloadから除外され、問題が解決されます。

このフィクスチャデータは、検証とリグレッション防止のための自動テストに追加できます。

労力を見積もる✅

努力[XS]

Tabrisrp 2020年12月17日

関連： https ：
除外リストにimage-compare__を追加すると、問題が解決しました。

NataliaDrause 2020年12月28日

@ engahmeds3ed @piotrbakこれは来週のリリースのために3.8.3の準備ができているかもしれませんか？マイルストーンを更新しませんか？

arunbasillal 2021年01月15日

👍1