缓存图像

假设我有web应用，其中有1000张图像等，缓存图像

<img src="something" /> 
<img src="something" /> 
<img src="something" /> 
. 
. 
. 
<img src="something" />

这使得页面加载慢，作为每个图像从请求检索和显示的页面。

我的问题是，是否有任何其他方式来减少页面加载时间。

我试过的是我试图用base64编码这些图像，但它增加了网页的大小。

任何指导，帮助表示赞赏。

来源

2014-09-11 oyks

现在很多网站只有在用户滚动某个点时才会开始渲染屏幕外图片，甚至点击“更多”按钮等。或者，您可以使用AJAX调用以异步方式加载它们。 – ne1410s 2014-09-11 12:15:52

[http://www.codeproject.com/Articles/22888/Caching-Images-in-ASP-NET](http://www.codeproject.com/Articles/22888/Caching-Images-in-ASP-NET ） – 2014-09-11 12:16:29

你试图解决的问题究竟是什么？图像是否从每个*请求重新加载到同一用户的页面上？（在这种情况下，缓存是一种选择。）或者你是在谈论一个缓慢的*初始*页面加载？（在这种情况下，缓存将无法帮助，因为浏览器尚不知道图像。）否，更改编码将不会执行任何操作。您仍然需要将数据从服务器传输到客户端，但实际上没有办法。 – David 2014-09-11 12:18:09

Yahoo!为网站提供了一个很好的优化技术列表。检查这个链接（https://developer.yahoo.com/performance/rules.html）

在你的情况1000页的图像是一个页面很多。考虑将页面分成多个页面并让用户使用分页切换页面。

如果一切都必须在同一页上，则考虑延迟加载。只有在加载html后才能加载图像。这可以结合加载滚动，如ne1410s建议。随着用户向下滚动，新图像被加载。（这里有一个http://www.appelsiini.net/projects/lazyload）

考虑优化您的网站在其他领域以及（它会给你额外的表现）。例如，在用户浏览器中缓存图像。当他们返回您的网站时，这些图片不会再从您的服务器上下载。

来源

2014-09-11 12:20:42

考虑延迟加载，图片只会按需加载（当页面滚动时）。

Scott Hanselman作出an interesting article关于他如何使用懒惰加载程序在云中省钱。

简单的解决方法是在用户滚动时延迟加载图像，因此仅对所看到的图像使用带宽。我看了一下Mike的 Tupola的jQuery LazyLoad插件以及其他一些类似的脚本。还有Luis Almeida的轻量级Unveil，如果你想减少花里胡哨的话。我最终使用了标准的Lazy Load。

延迟加载库是非常容易使用，例如：

<script> 
    $(function() { 
     $("img.lazy").lazyload({effect: "fadeIn"}); 
    }); 
</script>

除此之外确保所有的图像都为Web优化，尺寸/质量是正确的，使用精灵，如果你的图像是静态和缓存。

来源

2014-09-11 12:31:56 glautrou

如果您显示超过1000张图片，您的设计中出现错误。没有充分的理由在一个页面或最初的页面上显示1000多张图片。

来源

2014-09-11 12:45:53

回答

相关问题