Question

我有一个带有jQuery图库插件的HTML页面。该画廊收录了15张图片以及15张缩略图。页面现在加载有点慢，我想增加页面加载速度。我有几个基本问题：

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

如果不是，我可以下载第一张图片，并在页面的其余部分加载后让其他图片预先加载。
如果在页面上指定了两次相同的图像，是下载一次还是两次？

我认为我还会使用较大的图片作为缩略图，而不是加载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

是的，它们仍然被下载（实际上是常见的预加载技巧）
重复图像只下载一次。

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

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);

加快画廊页面

2 个答案: