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

Question

我正在建立一个以许多大图像为中心的幻灯片中心。 我想预加载这些图像，以使用户在浏览该网站时不会受到任何加载或过多的延迟。 我碰到了这一页，并决定使用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也给我100分中的17分。 所有图像的总mb为13.8。 之前只有50兆MB。

是否有更有效的方法来预加载此类大图像？ 这是实时链接 。

更新：

因此，以下是我根据以下标记的答案决定尝试的方法：

$(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区域中的serving_url感到困惑。

Answer 1

对于这样的事情，您真的想根据用户的行为确定加载哪些图像的优先级。 如果它是滑块，则您很清楚会先需要哪些图像。

如果创建一个循环并将src属性立即添加到所有图像对象，浏览器将尝试同时下载一堆图像，这意味着您立即需要的图像可能会花费很长时间。 如果要预加载整个图库，则在这种情况下最好依次下载。

这是有关此确切问题的最新文章，其中包含代码示例：

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

Answer 2

您无需全部预加载它们。

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

然后，一旦站点加载，就开始按顺序加载下一个。

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

Answer 3

您可以在预加载之前等待页面加载。

Window.onload = function (){

  //preload

 }

Answer 4

幻灯片应仅预加载第一张幻灯片和相邻的幻灯片。 当幻灯片更改时，请检查是否预装了下一张（和上一张）幻灯片，如果没有，请先加载。 如果尚未加载，请让您的过渡等待其加载；如果已加载，请正常循环。