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

时间:2012-07-18 13:15:47

标签: performance image

我在本地主机上运行了一个Web应用程序。要求是加载多个矩形jpg图像(96个图像,每个平均大小为7k)并在运行时显示在主页上。图像以8x12行/列的网格显示。我通过在javascript中设置'img'的'src'属性来加载图像。分配给'src'属性的url对于所有图像都是相同的,但图像ID是不同的。图像正在加载,但主要问题是它们加载速度非常快,并且它们是序列中的加载意味着1,2,3,4 ......等等,但是有些图像没有按顺序加载。我想提高这个页面的性能。我已经尝试过计算不同点的时间,例如:

  1. 从客户端发起呼叫时(设置了图像src属性)

  2. 当服务器正在接听电话时。 (服务于个人图像的服务器上的页面)

  3. 当服务器即将返回图像时。

  4. 当接收/显示客户端图像时(在javascript中调用图像加载事件)

  5. 在查看收集到的数据之后,主要时间丢失在1到2之间,即在客户端呼叫发起和服务器正在接收特定图像的呼叫之间。

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

    有人可以在这种情况下帮助我,因为我被困在这里很多天,我现在真的很缺乏时间。迫切需要改善这些图像负载的性能。

    提前致谢。

1 个答案:

答案 0 :(得分:0)

由于你强调缺乏时间,我建议你尝试一个jQuery插件,按需加载图片。您加载图片的图库,用户是否在其中滚动?或者它是一个大场? 如果它是用户可以滚动的图库,我强烈建议您查看lazyload。这个插件的作用是,它仅在需要时才获取图像。只要它不在屏幕上,它就不会被加载。有关简短示例,请查看this demo

我希望这可以帮到你。