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

我有一个页面，其中着陆页的图像随时间变化（图像发生变化）。这很好，但是当上传网站时，我意识到我的着陆页上的图像加载非常缓慢，因此看起来不太好。一旦所有加载（全部出现至少一次），然后页面再次良好，过渡平稳顺利。第一次打开页面时图像非常缓慢 - 如何加载图像

我想到了一种预加载图像的方法。我发现很多东西，并尝试以下内容：

  $(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

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

回答

相关问题