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

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

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

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

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

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