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在100分中给出了17分。所有图像的总mb是13.8。在50-some 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

对于这样的事情，你真的想根据用户行为确定哪些图像加载的优先级。如果它是一个滑块，你可以很好地了解首先需要哪些图像。

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

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

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

Answer 2

您无需预先加载它们。

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

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

您的网站加载速度会快得多。作为一般经验法则，对于初始页面加载，仅加载正确呈现它所需的资源。

Answer 3

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

Window.onload = function (){

  //preload

 }

Answer 4

您的幻灯片应仅预加载第一张幻灯片和相邻幻灯片。当幻灯片更改时，检查下一个（和上一个）幻灯片是否已预加载，如果没有，则加载它。如果没有加载，请让你的转换等待加载，如果加载，则正常循环。

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

4 个答案: