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

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

我认为你不应该使用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;
}