Javascript 在网页中预加载和预呈现图像

所以我有3个单独的背景图像在3个单独的div中。我设置了一个页面，当用户点击“继续”时，可以自动从一个div滚动到下一个div。我目前有一个问题，用户可以看到加载的背景图像（快速，但仍然…），我想要一个平稳的用户体验，并试图让图像预加载之前，用户开始玩应用程序。一旦我循环浏览了所有3页，一切都会顺利进行。我如何让浏览器预先将所有这些加载到内存中，为什么它还没有这样做？只有第一个div在页面加载时对用户可见，但这只是因为其他div隐藏在溢出下。我尝试了javascript

new Image（）.src=URL

，但没有帮助。我试过HTML/CSS

，但也没用。这对我来说是一个难题。。。有什么建议吗？我计划在web应用程序中添加一个加载屏幕，但我想在加载屏幕后面添加一个优雅的解决方案

谢谢！

---

Brett

我认为，假设父容器未隐藏，那么在大多数情况下（将样式设置为

display:none

）应该可以工作。它不一定是最终显示的容器：

   <img src="/assets/img/inputs.jpg" style="display: none;" />

---

或者，您可以尝试将img的高度和宽度分别设置为1px。

图像的大小（以字节为单位）有多大？因为应该考虑“最小的是1.3mg，最大的是8.5mb您是对的-这是文书监督，因为我试图获取src。我已经改正了。