javascript - CSS 背景幻灯片太慢？

Question

我正在尝试建立我的网站，我是这方面的新手，但我曾尝试将此代码用于背景幻灯片，不幸的是，加载页面需要很长时间。我已经将 3-500KB 的图像优化为现在的 90-100KB，但仍然需要很长时间才能加载一些...帮助!

My updated version of my site .我正在尝试使用我在网上找到的这些技巧来使其加载速度更快，但我很难让它加载得足够快。

• > My CSS File (太大而无法发布)。
• > My HTML Page这里发不了，好像不行

Answer 1

在检查中，您加载的图像似乎太多了，而且一次加载，这使得网站变慢了。

( http://i.stack.imgur.com/xPRxM.png )

您应该使用延迟加载来更快地加载网站，因为这样只会加载所需的图像。

在需要时请求图像(或者可能在需要图像之前一点)，但您绝对应该不将所有请求放在一起。

其次，你应该有不同尺寸的图片，根据需要准备好，而不是让浏览器去调整图片的大小。浏览器需要花费时间和处理来调整图像大小。如果您有图像的副本，这会让生活变得更简单。

有很多插件可以实现延迟加载。 由于您使用的是 jQuery，因此这里有一些:

1. > http://www.appelsiini.net/projects/lazyload (简单演示 Here )
2. > http://css-tricks.com/snippets/javascript/lazy-loading-images/
3. > http://www.google.com/search?q=lazy+loading+jquery

其他提示:

将您所有的脚本合并为一个，并制作一个单一的js文件。

因此，以下内容:

 - <script type="text/javascript" src="js/pop-ups.js"></script>
 - <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
 - <script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
 - <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> 
 - <script type="text/javascript" src="js/cufon.js"></script>

变成<script type="text/javascript" src="js/all.js"></script>

现在，进一步优化，缩小它们。

在线工具很多，但我最喜欢this一个。

另外，我建议你看看 this ，(查看幻灯片 97 之后)，Chris Coyier 的演讲。