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

我有一個頁面，其中着陸頁的圖像隨時間變化（圖像發生變化）。這很好，但是當上傳網站時，我意識到我的着陸頁上的圖像加載非常緩慢，因此看起來不太好。一旦所有加載（全部出現至少一次），然後頁面再次良好，過渡平穩順利。第一次打開頁面時圖像非常緩慢 - 如何加載圖像

我想到了一種預加載圖像的方法。我發現很多東西，並嘗試以下內容：

  $(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*/ 
     });

沒有成功。第一次加載頁面時，我有完全相同的問題。第一次加載照片的速度非常緩慢，而且照片的更改功能在他們有時間加載之前就開始了（有加載功能的旋轉圖片進入並進行更改）。

因爲我是新手，所有人都可以請幫忙解決問題的最佳方法，並確保首先完成加載。

非常感謝

來源

2016-05-31 inasiopo

什麼是您的圖像的文件大小？ – zerohero

每個200K（我有其中五個） – inasiopo

因此，您只需下載1mb只需5張圖片？他們的決議是什麼？我認爲你需要首先調整圖像大小 – zerohero

我認爲你不應該使用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; 
}

來源

2016-05-31 12:39:53

如果圖像的大小非常大（通過它的聲音），它仍然會很慢，所以用代碼「解決」它將無濟於事。但我喜歡這個解決方案 – zerohero

我試過這個選項。但是現在頁面的加載最初需要很長時間。這是已知的效果還是我做錯了什麼？ – inasiopo

圖像大小約爲200k每個 – inasiopo

可以在必要的文件，然後將通過時，它的時間來查找圖像瀏覽器中發現的命名空間創建一個新的圖像對象。像這樣：

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

這不會將圖像放在頁面上，但它會加載它以供將來使用。

希望這有助於！

來源

2016-05-31 12:38:50

這裏是CSS的方式來預載的圖片。

從這個鏈接請參閱接受的答案： How to Preload Images without Javascript?

這將基本上加載在後臺的所有圖像，而你顯示加載GIF和圖像的實際參考將從緩存加載它。

來源

2016-05-31 12:47:04 Shiv

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

回答

相關問題