网页上的图像在 Android 8/9 上的 Chrome 78 上不可见（但在 Chrome 76 和 Android 10 上工作）- 可能有什么问题？

Question

我有一个小工具来计算你最喜欢的神奇宝贝，位于这里。 一段时间以来，我一直从用户那里收到断断续续的报告，称图像无法正常工作 - 他们只是看到空的灰色圆圈。 长话短说，他们似乎都在 Android 上使用 Chrome，我已经向一些使用 Android 手机的朋友证实，在 Android 8 或 9 上使用 Chrome 78 也不适合他们。

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

如果我在更新后手动打开指向他手机上的其中一张图像的直接链接，那效果很好，所以大概加载图像没有问题（无论如何这会很奇怪，因为它们托管在同一个域中） .

回顾一下我收到的电子邮件，第一个似乎是从 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 新的原生延迟加载图像，出于某种原因，即使这些图像可见且位于首屏，也无法加载这些图像。 就我而言，这看起来像是 Android Chrome 中的一个错误。 即使在完全相同的设备上，手动启用或禁用 chrome://flags 下的延迟加载也会触发或解决问题。

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