android - 网页上的图像在 Android 8/9 上的 Chrome 78 上不可见(但在 Chrome 76 和 Android 10 上工作)——可能是什么问题？

Question

我有一个小工具可以计算出你最喜欢的神奇宝贝，位于 here .一段时间以来，我不断收到用户的断断续续报告，称图像无法正常工作——他们只是看到空的灰色圆圈。长话短说，他们似乎都在 Android 上使用 Chrome，而且我已经与一些使用 Android 手机的 friend 确认，它也不适用于他们，在 Android 8 或 9 上使用 Chrome 78。

但是，对于另一个在 Android 10 上使用相同 Chrome 的 friend 来说，它工作正常，而在我丈夫的手机 (Android 6) 上，Chrome 还没有更新，仍然是版本 76，它也可以工作直到他刚刚将其更新为 78(此时他的手机立即开始出现同样的问题)。 Chrome 78 在我的 iPhone 或笔记本电脑上运行良好。

如果我在更新后手动打开他手机上其中一张图片的直接链接，效果很好，所以大概加载图片时没有问题(无论如何都会很奇怪，因为它们托管在同一域中)。

通过我收到的电子邮件回顾我收到的报告，第一个似乎是从 10 月 12 日开始的，Chrome 77 于 9 月发布，因此问题首先出现在那里似乎是合理的。

但是，对于如何处理这个问题，我有点不知所措。 Chrome 77 中可能发生了什么变化，仅在 Android <10 上，这可能是导致这种情况的原因，可以采取什么措施来解决它？我认为我在该页面上没有做任何非常奇怪的事情；这是应用于相关元素的 CSS:

.item-list li {
    margin:0;
    display:inline-block;
    height:106px;
    width:106px;
    border:3px solid transparent;
    text-align:center;
    position:relative;
    vertical-align:top;
    overflow:hidden;
    border-radius:100%;
    color:#F7F7F7;
}

.item-list li span {
    display:block;
    width:100px;
    height:100px;
    padding:3px;
    background:#F7F7F7;
    border-radius:100%;
}

.item-list li img {
    position:absolute;
    top:-7px;
    left:-11px;
    z-index:100;
}

Answer 1

原来这是关于 Chrome 的新 native lazy-loading of images ，出于某种原因阻止了这些图像的加载，即使它们是可见的并且在首屏之上。就我而言，这看起来像是 Android Chrome 中的一个错误。在 chrome://flags 下手动启用或禁用延迟加载会触发或解决问题，即使在完全相同的设备上也是如此。

通过在图像标签上手动添加 loading="eager"，我可以强制 Chrome 无论如何加载图像，即使启用了该功能，也解决了这个问题。我希望能够创建一个最小的测试用例，以便能够提交有关此的错误并在源头上实际修复它。