如何提高Web应用程序的图像加载性能？

我有一个Web应用程序在本地主机上运行。要求是加载多个长方形jpg图像（96张图像，每张大小平均7k）并在主页上显示。图像以8x12行/列的网格显示。我通过在javascript中设置'img'的'src'属性来加载图片。分配给'src'属性的url对于所有图像都是相同的，但图像ID不同。图像正在加载，但主要问题是它们加载速度并不快，它们是一些序列中的加载意味着1,2,3,4 ...等等，但某些图像不会按顺序加载。我想改善此页面的性能。我已经尝试了搞清楚的定时的不同点处，如：如何提高Web应用程序的图像加载性能？

当呼叫始发客户形式（图像src属性被设置）
当服务器正在接收呼叫。（服务器上服务于个别图像的页面）
服务器即将返回图像时。
当客户端接收到侧图像/显示（称为以JavaScript图像加载事件）

原来看所收集的数据主时间1和2之间失去上面是后发起客户端呼叫，服务器正在接收特定图像的呼叫。

我也尝试过在machine.config中设置maxWorkerThreads，minWorkerThreads，requestQueueLimit和maxconnection等参数，但没有明显的改进。

有人可以帮助我在这种情况下，因为我在这里卡住了很多天，现在我真的很短暂。迫切需要提高这些图像加载的性能。

在此先感谢。

来源

2012-07-18 zeeshan malik

如果网格从不需要全尺寸的图像，你有没有考虑把许多图像放在一个大的图像文件中并使用CSS sprite方法？ – 2012-07-18 13:58:25

嗨，乔纳斯，是的，这是一个想法，但记住。但问题是这些图像是从另一个应用程序远程接收的运行时间图像。如果我需要实现CSS sprite之类的东西，那么我需要在客户端每次访问该页面后立即将所有这些图像合并到一个大图像中。你认为有什么办法可以做到吗？ – 2012-07-18 14:16:10

不，如果图像不可预知，您可能会丢失。您是否评估过提供映像的远程应用程序是否可能成为瓶颈？在这种情况下，缓存可能是一种方法（请参阅电子标签和最后修改）。 – 2012-07-18 14:48:15

既然你强调时间不够，我会建议你尝试一个jQuery插件，按需加载图像。在其中加载图片的图库，用户是否在其中滚动？或者它是一个大领域？如果是用户可以滚动的图库，我强烈建议您查看lazyload。这个插件的功能是只在需要时才提取图片。只要它不在屏幕上，它就不会被加载。举个简单的例子，看看this demo。

我希望这可以帮助你。

来源

2012-07-18 13:21:43

实际上，没有使用延迟加载或按需图像，因为一旦页面URL被击中，它需要同时加载所有图像，并且没有滚动，因为图像足够小以适合页面。你可以说这与在没有任何滚动的情况下在谷歌图像上看到图像相似。我不确定谷歌图像如何加载太快。需要帮忙？ – 2012-07-18 13:57:04

在这种情况下，制作一个（甚至更小）的缩略图可以帮助你。虽然由于你的初始图像的大小已经只有7KB，这并不会缩短加载时间。 – 2012-07-18 14:05:35

任何其他的事情，我可以做的更快加载图像在网页上？ – 2012-07-18 14:09:46

如何提高Web应用程序的图像加载性能？

回答

相关问题