我是一名摄影师，最近我将我的网站改版为单页布局以展示我的作品集。我使用 HTML/CSS/Jquery 来构建网站。在当前格式中，我使用页面滚动功能从一个部分导航到另一个部分。虽然这很好，但页面需要永远加载。我做了一些研究并了解了惰性加载器及其类似的东西，但问题是我不熟悉 CSS 或 Jquery。我对 HTML 没问题。我通常会举一些例子并根据我的要求对它们进行调整。由于这个限制，我无法实现惰性加载器。有没有更简单的方法来做到这一点？
此外，我真的很想快速加载图像，而不是按需加载，因为如果用户从一个部分跳到另一个部分，我希望图像在自动滚动期间可见。
这是我的网站 - http://www.thekite.in
任何想法或建议都会有所帮助。
【问题讨论】：
标签： performance image load
我会删除加载动画，因为它实际上会让访问者等待更长时间才能看到任何内容。
您真的需要页面上的所有 javascript 吗？如果是这样，您应该合并文件并将可以移动的脚本移动到页面底部。
页面上有 166 个资源，总大小为 22MB。
优化页面太大的图片（jpegmini.com 之类的东西对此非常有用）
浏览器只能同时打开有限数量的连接（大多数现代浏览器为 6 个），因此您应该跨多个域分割图像，例如http://images1...、http://images2 等
您可以根据可见的内容延迟加载它们，但我会先从上述内容开始。
【讨论】：
一个快速的谷歌搜索让我知道：http://www.appelsiini.net/projects/lazyload
由于您使用的是 jquery，因此这个惰性加载器可能是一个选项...
您还应该考虑对图像进行客户端（浏览器）缓存。当您的网络服务器将正确的 HTTP 缓存标头添加到您的图像时，浏览器不必多次加载它们。
要检查性能瓶颈在哪里，请查看 YSlow：http://developer.yahoo.com/yslow/
这是一个有助于提高网站性能的浏览器插件。
【讨论】：