Wp-rocket: LazyLoad 和 JetPack 比较图像块兼容性

创建于 2020-12-03 · 4评论 · 资料来源: wp-media/wp-rocket

在提交问题之前，请检查您是否已完成以下步骤：

确保您使用的是最新版本 - 是的
使用搜索功能确保之前没有报告错误 -yes

描述错误
使用 JetPack 比较图像块添加时不会显示图像。
标记被剪切，所以当我检查元素时只有像素 svg 可见，而不是图像源。
截图：
禁用 LazyLoad： https :
启用 LazyLoad： https :

再现
重现行为的步骤：

使用比较图像块创建帖子。
在 WP Rocket 中启用 LazyLoad
打开页面，图像没有像这里的截图那样显示： https :

预期行为
图像必须显示如下： https :

当前解决方案
从 LazyLoad 选项中排除类名class="image-compare 。
在应用 LL 之前在源代码中阻止标记： https :

附加上下文
比较块适用于 JetPack 延迟加载和 WordPress 核心延迟加载，因为图像实际上没有被延迟加载，即排除。

相关票证： https :
松弛： 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>

该问题发生在比较脚本启动后，并且无法与延迟加载标记一起正常工作。

范围解决方案✅

将image-compare__到RocketLazyload\Images::getExcludedAttributes()排除项中，将从延迟加载中排除这些图像并解决问题。

可以将此夹具数据添加到我们的自动化测试中，以进行验证和回归预防。

估计努力✅

努力[XS]

Tabrisrp 于 2020-12-17

相关： https :
将image-compare__到排除列表解决了该问题。

NataliaDrause 于 2020-12-28

@engahmeds3ed @piotrbak这可能已经准备好在下周发布 3.8.3 了吗？我要更新里程碑吗？

arunbasillal 于 2021-01-15

👍1