强制在移动浏览器上加载热切的图像



在我的网站上,我有几个带有onload和oneror回调的图像

<img onload="imgCallback()" onerror="imgCallback()" class="article-img" src=":assets:/price/12-2.jpg" alt="A chart showing vitamin and mineral content of liver, kidney, spleen, heart, broccoli, kale, banana and apple" />

一些初始化只在加载了所有图像之后进行,因为在显示了所有图像后,我需要容器元素的全高。

这在我的桌面上运行良好,但在一些移动浏览器上似乎不起作用。我在我的Android Chrome浏览器上测试过这一点,它似乎只在我向下滚动足够远后才缓慢加载图像,从而延迟了页面初始化,而这预计会在网站的初始加载时发生。

我真的想不出任何其他方法来解决这个问题,因为我需要容器在图像加载后的全宽,这是我静态不知道的,因此我想问是否有方法向浏览器发出信号,表明它应该急切地加载图像?

在这里找到了答案。我只需要将loading="eager"添加到我的图像标签中。

相关内容

  • 没有找到相关文章