不应在页面加载时加载特定内容

Question

我创建了一个wp主题。这是其页面http://www.durgeshsound.com/gallery/

之一

当您点击任何视图相册时，它会打开该相册的相应图片。 每张专辑包含10-12张照片，因此在整个页面上，大约有80-90张图像。

问题是由于80-90张图片打开页面需要花费太多时间。 有没有办法在页面加载时加载封面图像，并在单击查看相册时逐个加载相册图片？请注意，封面图片被设置为精选图片，其他相册图片将在帖子中添加到媒体中。

这是我的代码

Javascript: http://pastie.org/9658839 Page template code in wp：http://pastie.org/9658843 CSS: http://pastie.org/9658847

请提前帮助。谢谢

Answer 1

可以尝试使用Lazy Load js插件，例如：http://www.appelsiini.net/projects/lazyload

Answer 2

在网页中使用图片时，几乎没有什么步骤可以优化网站的效果。

1. 使用Lazy Loading
2. 使用sprite image避免对小图片发出多个http请求。
3. 对静态图像使用Caching。这将有助于避免不必要的http请求。

精灵示例：  您可以在此站点中看到SO也使用精灵图像。

Answer 3

如果您在网站上使用高分辨率图像，那么延迟加载会很有帮助，那么这是一个让您的网站看起来很专业的最佳解决方案。这使得页面加载速度更快，并减少了服务器流量，因为客户端在他们看到的区域中加载图像。 最好example了解如何操作。

获取plugin。它可以用作一个简单的延迟加载器，只需作为响应式延迟加载器（处理断点）或作为一个高级延迟加载器来处理断点和显示。