0

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

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

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

  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' />

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

4

2 回答 2

1

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

在此处查看演示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);
于 2013-01-18T16:28:47.610 回答
1
  1. 是的，它们仍然被下载（实际上是常见的预加载技巧）
  2. 重复的图像只下载一次。

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

于 2013-01-18T09:53:09.320 回答