加快图库页面

Question

我有一个jQuery图库插件的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插件？ 从谷歌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);