加速画廊页面

Question

我有一个带有 jQ​​uery 画廊插件的 HTML 页面。该画廊拍摄了 15 张图片和 15 张缩略图。现在页面加载有点慢，我想提高页面加载速度。我有几个基本问​​题：

1. 如果在图像上指定了display:none，我知道它不会占用文档流中的空间，但它仍然被下载了吗？

   如果不是，我可以下载第一张图片，然后在页面的其余部分加载完成后让其他图片预加载。

2. 如果同一个图片在一个页面上被指定两次，是下载一次还是两次？

   我想我会使用较大的图像作为缩略图，而不是加载 15 个图像和 15 个缩略图，并指定 height 和 width 属性以使它们变小。

   例如，

   <div id="main-image"><img src='something' alt='something' /></div>

   <div id="thumb-image"><img src='something' alt='something-else' width='50px' height='50px' />

任何其他加快进程的指针都会非常有帮助。提前致谢。 :)

Answer 1

1. 是的，它们仍在下载（实际上是常见的预加载技巧）
2. 重复的图片只能下载一次。

您从哪里获得 jQuery 插件？ 从 google API 加载 jQuery 将允许浏览器通过 google 缓存脚本，从而使您和您的用户的速度略有提高。

Answer 2

图片在您的主页上吗？如果没有，那么您可以先预加载图像。

在这里查看演示 http://www.thewindowdr.info 然后点击导航栏上的图库。

创建 image-preload.js 文件并将其粘贴，然后填写图像位置。

将此代码添加到您的标题中

<script type="text/javascript" src="../js/image-preload.js"></script>

并将此代码添加到 .js 文件中

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();
        var img4 = new Image();
        var img5 = new Image();
        var img6 = new Image();
        var img7 = new Image();
        var img8 = new Image();
        var img9 = new Image();
        var img10 = new Image();
        var img11 = new Image();
        var img12 = new Image();
        var img13 = new Image();
                var img14 = new Image();
                var img15 = new Image();


        img1.src = "../images/#####.jpg";
        img2.src = "../images/#####.jpg";
        img3.src = "../images/#####.jpg";
        img4.src = "../images/#####.jpg";
        img5.src = "../images/#####.jpg";
        img6.src = "../images/#####.jpg";
        img7.src = "../images/#####.jpg";
        img8.src = "../images/#####.jpg";
        img9.src = "../images/#####.jpg";
        img10.src = "../images/#####.jpg";
        img11.src = "../images/#####.jpg";
        img12.src = "../images/#####.jpg";
        img13.src = "../images/#####.jpg";
        img14.src = "../images/#####.jpg";
        img15.src = "../images/#####.jpg";

    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);