Question

我有一个小工具可以计算出您最喜欢的神奇宝贝（位于here）。一段时间以来，我一直在间歇性地收到用户的报告，这些报告说图像不起作用-他们只是看到空的灰色圆圈。长话短说，他们似乎都在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的新native lazy-loading of images有关，由于某种原因，即使这些图像可见且处于折叠状态，它们仍可阻止这些图像的加载。就我而言，这看起来像是Android Chrome中的错误。即使在完全相同的设备上，手动在chrome：// flags下启用或禁用延迟加载也会触发或解决该问题。

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

网页上的图片在Android 8/9上的Chrome 78上不可见（但在Chrome 76和Android 10上可以使用）-怎么了？

1 个答案: