第一次打开页面时图像非常慢 - 如何加载图像

Question

我有一个页面，其中着陆页的图像随时间变化（图像逐一变化）。效果很好，但是在上传网站时，我意识到我在着陆页上的图片加载速度非常慢，因此看起来不太好。全部加载完成后（全部至少出现一次），页面又好了，过渡也很顺畅。

我在想办法预加载图片。我找到了很多东西并尝试了以下方法：

           $(window).load(function() {

               $(".loader").fadeOut("slow");    /*gif that shows when page loads*/

               function backgrounds() {
                    for (i = 0; i < preload.arguments.length; i++) {
                        images[i] = new Image()
                        images[i].src = preload.arguments[i]
                    }
                }

           })

                var backgrounds = new Array(
                    'url(Images/image_1.jpg)'
                  , 'url(Images/image_2.jpg)'
                );

      $(document).ready(function(){
           /*I have here other functions as well as the function that changes the images one by one*/
      });

没有成功。第一次加载页面时，我遇到了完全相同的问题。照片第一次载入特别慢，还来不及载入就开始换图功能（有办法载入旋转图片的功能来换图）。

由于我是这一切的新手，任何人都可以帮助解决问题的最佳方法，并确保首先完成加载。

非常感谢

Answer 1

您可以使用必要的文件在命名空间中创建一个新的图像对象，浏览器在查找图像时会找到该对象。像这样：

(new Image()).src = "yourImagePath";

这不会将图像放在页面上，但会加载它以备将来使用。

希望对您有所帮助！！

Answer 2

我认为您不应该使用 javascript 来预加载图像，因为 CSS3 有更好的解决方案。这与最近的浏览器兼容。

https://perishablepress.com/preload-images-css3/

例如：

.preload-images {
    background: url(image-01.png) no-repeat -9999px -9999px;
    background: url(image-01.png) no-repeat -9999px -9999px,
        url(image-02.png) no-repeat -9999px -9999px,
        url(image-03.png) no-repeat -9999px -9999px,
        url(image-04.png) no-repeat -9999px -9999px,
        url(image-05.png) no-repeat -9999px -9999px;
}

Answer 3

这是预加载图像的CSS方法。

参考此 link 中已接受的答案： How to Preload Images without Javascript?

这基本上会在后台加载所有图像，而显示加载 gif 和图像的实际引用将从缓存中加载它。

第一次打开页面时图像非常慢 - 如何加载图像

Images very slow when opening page first time - how to load images

javascript

jquery

image

preload