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/

例如：

// get filename
String fileName = "C:\\tmp\\Q37545784.txt";

// get executable of wordpad
String wordPadExecutable = "C:\\Program Files (x86)\\Windows NT\\Accessories\\wordpad.exe";

// create a process builder that executes wordpad and passes filename as parameter
ProcessBuilder pb = new ProcessBuilder(wordPadExecutable, fileName);

// start
pb.start();

Answer 2

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

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

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

希望这会有所帮助!!

Answer 3

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

请参阅此链接中接受的答案： How to Preload Images without Javascript?

这基本上会在背景上加载所有图像，而显示加载gif和图像的实际参考将从缓存加载它。

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

3 个答案: