预加载较大图像的有效方法

Question

我正在构建一个网站，该网站以包含大量大图像的幻灯片为中心。我想预加载这些图像，以便用户在浏览网站时不会遇到任何加载或过多的延迟。我遇到了 this page 并决定使用 JavaScript 方法#1。所以我基本上按照给出的代码将其放在页脚中，当然也添加了我自己的图片。

<div class="hidden">
    <script>
        <!--//--><![CDATA[//><!--
        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "/img/slides/bbq.jpg",
            "/img/slides/ext-avt-office.jpg",
            "/img/slides/ext-front-abstract.jpg",
            "/img/slides/ext-front-wide.jpg",
            "/img/slides/front-door.jpg",
            "/img/slides/glass-rill-2.jpg",
            "/img/slides/glass-rill.jpg",
            "/img/slides/kitchen-west.jpg",
            "/img/slides/koi-pond-day.jpg",
            "/img/slides/main-hall-2.jpg",
            "/img/slides/main-hall-wide.jpg",
            "/img/slides/master-bath.jpg",
            "/img/slides/master-doors-day.jpg",
            "/img/slides/pool-area.jpg",
            "/img/slides/pool-back-of-house.jpg",
            "/img/slides/rear-porch.jpg",
            "/img/slides/reglet-detail.jpg",
            "/img/slides/amythist-vanity.jpg",
            "/img/slides/art-and-statue.jpg",
            "/img/slides/avf-office-vanity.jpg",
            "/img/slides/bonsai-tree-night.jpg",
            "/img/slides/chandelier-detail.jpg",
            "/img/slides/childrens-vestibule.jpg",
            "/img/slides/detail-of-vanity-graff-valve.jpg",
            "/img/slides/dining-table.jpg",
            "/img/slides/front-door-detail.jpg",
            "/img/slides/garage-cabinetry.jpg",
            "/img/slides/guest-vanity-detail.jpg",
            "/img/slides/kitchen-waterfall-detail.jpg",
            "/img/slides/koi-pond-night-lantern.jpg",
            "/img/slides/library-angle.jpg",
            "/img/slides/library-bookcase.jpg",
            "/img/slides/meditation-room.jpg",
            "/img/slides/nautical-handrail-detail.jpg",
            "/img/slides/neon-love-seat.jpg",
            "/img/slides/office-bookcase-detail.jpg",
            "/img/slides/playboy-dining-chair-2.jpg",
            "/img/slides/playboy-dining-chair.jpg",
            "/img/slides/rearview-mirror-coffee-table.jpg",
            "/img/slides/westward-chair-close-up.jpg",
            "/img/slides/westward-chairs-and-couch.jpg"
        )
    //--><!]]>
    </script>
</div>

但是，考虑到每张图片的大小，这确实会降低网站的速度。即使在优化图像之后，PageSpeed 也给了我 17 分（满分 100 分）。所有图像的总 mb 为 13.8。在 50 多 mb 之前。

有没有更有效的方法来预加载像这样的大图像？这是 live link.

更新：

所以，这是我决定根据下面标记的答案尝试的方法：

$(window).on('load', function() {
    function preload(imageArray, index) {
            index = index || 0;
            if (imageArray && imageArray.length > index) {
                var img = new Image ();
                img.onload = function() {
                    preload(imageArray, index + 1);
                }
                img.src = images[index]['serving_url'];
    }
    /* images is an array with image metadata */
    preload(images);
});

var images = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
];

我只是对 serving_url 区域的内容感到困惑。

Answer 1

您不需要全部预加载它们。

您一次可以看到多少张图片？仅预加载前几个。

然后在网站加载后，开始按顺序加载下一个。

您的网站将加载得更快。作为一般经验法则，对于初始页面加载，仅加载正确呈现所需的资产。

Answer 2

您可以等待页面加载后再预加载。

Window.onload = function (){

  //preload

 }

Answer 3

对于这样的事情，您确实希望根据用户行为确定加载哪些图像的优先级。如果它是一个滑块，您很清楚首先需要哪些图像。

如果您创建一个循环并同时向所有图像对象添加 src 属性，浏览器将尝试并发下载一堆图像，这意味着您需要的图像可能需要很长时间很久。如果要预加载整个图库，在这种情况下最好按顺序下载。

这是一篇关于代码示例的确切问题的最新文章：

http://www.photo-mark.com/notes/image-preloading/

Answer 4

您的幻灯片应该只预加载第一张幻灯片和相邻的幻灯片。当幻灯片发生变化时，检查是否预加载了下一张（和上一张）幻灯片，如果没有则加载它。如果未加载，请让您的过渡等待加载，如果已加载，则正常循环。

预加载较大图像的有效方法

Efficient method to preload larger images

javascript

css

jquery

image

preload