第一次打開頁面時圖像非常慢-如何加載圖像

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;
}

Answer 2

您可以在名稱空間中使用必要的文件創建一個新的圖像對象，然后當需要查找圖像時，瀏覽器會找到它。 像這樣：

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

這不會將圖像放置在頁面上，但是會加載該圖像以備將來使用。

希望這可以幫助！！

Answer 3

這是預加載圖像的CSS方法。

請從以下鏈接中獲得公認的答案： 如何在不使用Javascript的情況下預加載圖像？

基本上，這將在背景上加載所有圖像，而顯示加載的gif和圖像的實際引用將從緩存中加載它。