你如何像Facebook一样快速地展示图片?

时间:2011-06-19 01:19:57

标签: javascript jquery gallery image

你们中的任何人都可以帮助我像facebook那样快速地展示图片!

Facebook观看图片令人难以置信,因为我觉得这些图片有点预装。

通常你会在其他网站上查看画廊,这对a **来说是一种痛苦,因为每次改变画面都会很慢。

我认为你需要javascript才能做到这一点!?

6 个答案:

答案 0 :(得分:2)

根据您的实现,您可以使用一些ajax和隐藏的dom元素来执行此操作。

假设您有一个带幻灯片的图库..您可以为每个加载插入一个隐藏的dom元素,其中包含幻灯片放映的下一张图片。这将导致图像被加载。如果您之后使用JS来插入相同的图像标记,浏览器将依赖它的缓存,而不是从服务器中获取它,因为它已经有了该照片。

这是一个广泛的问题,但我认为这种方法可行。你最好不要重新发明轮子,看看基于JQuery的图像预取图书馆或者你可以得到什么......

答案 1 :(得分:1)

Facebook将图像压缩到极端。亲自尝试,拍摄您遇到问题的图片并将其上传到Facebook。然后检查图像的大小,你就会知道原因。一旦我通过上传17429字节图像进行了一次小测试,并且压缩它到18757字节,比原始尺寸增加了7%!

在该压缩大小下,您可以实现某种预取下一个图像以供显示。我认为,他们拥有非常好的基础设施。

答案 2 :(得分:0)

预加载意味着在加载页面时加载,这是<img>标记所发生的情况。不,这只是因为文件大小较小。

答案 3 :(得分:0)

Facebook使用Bigpipe,有一个名为openpipe的开放式实现

当服务器停止处理时,Bigpipe会将内容推送到浏览器,因此用户会注意到它更快。

它基本上加载了pagelet,当它们为用户准备好时,在浏览器中实现是基于Javascript的,并且您必须使用首选服务器语言将信息推送到客户端。

答案 4 :(得分:0)

首先,facebook严重压缩图片。许多其他网站没有。 Facebook也拥有比大多数其他网站更快的网络。

使用较小的图像尺寸,客户端可以预取下一张图像。

答案 5 :(得分:0)

如果您希望在您的网站上更快地查看想要的图像,请首先确保图像压缩得体积不小,并且不会超出必要的范围。我看到网站使用一个非常大的图像按比例缩小以适应5倍小的元素的次数是荒谬的。

您可以查看这些包含许多实现的网站以及如何预加载/预取图片的链接(css,JavaScript,ajax)

http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

由于您的问题标记为'jquery',因此这里只是一个。

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript