I've got a social community with a lot of traffic. In the right column of the site's layout, we got a "online list" that prints out a 40x40px thumbnail pic of friends, people in your area etc. 30-40 images in total.
我有一个拥有大量流量的社交社区。在网站布局的右栏中,我们得到了一个“在线列表”,可以打印出40x40像素的朋友缩略图,您所在地区的人等等。总共30-40张图片。
Just before the right column loads, it hangs as all these images are loaded. I need a faster solution compatible down to IE6.
在右列加载之前,它会在加载所有这些图像时挂起。我需要一个兼容IE6的更快的解决方案。
Is it possible to load images by ajax after the page has loaded, use some kind of inline gfx (supported by IE6) or other methods?
是否可以在页面加载后通过ajax加载图像,使用某种内联gfx(IE6支持)或其他方法?
5 个解决方案
#1
Loading the images via AJAX will work. You can easily do it using jQuery for example. Define a div for every image you want to display. Perhaps you could display a "Loading.." image or something like that in place of the actual image, when the page is initially displayed.
通过AJAX加载图像将起作用。例如,您可以使用jQuery轻松完成。为要显示的每个图像定义一个div。当最初显示页面时,也许您可以显示“正在加载...”图像或类似的图像来代替实际图像。
There are many options with jQuery. There is a plug-in for lazy loading, you can preload images and you can easily add effects when the image is displayed.
jQuery有很多选项。有一个用于延迟加载的插件,您可以预加载图像,并且可以在显示图像时轻松添加效果。
#2
Make this page area load asynchronously in the background.
使此页面区域在后台异步加载。
#3
Yes, you can defer loading of the images, though you might want to include the regular HTML version inside a <noscript> tag so that simpler user agents/spiders can see your page.
是的,您可以推迟加载图像,但您可能希望在
Another technique is to load the images from a number of subdomains, since browsers typically only open a small number of connections to each domain. For example, if you site is on foo.com, load your static images from a.foo.com, b.foo.com and c.foo.com
另一种技术是从多个子域加载图像,因为浏览器通常只打开到每个域的少量连接。例如,如果您的站点位于foo.com上,请从a.foo.com,b.foo.com和c.foo.com加载静态图像。
#4
I would also consider not showing 30-40 dynamic pictures since neither the server nor the client can effectively cache these pictures.
我也会考虑不显示30-40张动态图片,因为服务器和客户端都无法有效地缓存这些图片。
#5
If your problem is related to resizing these images server side on the run, you might want to store the thumbnails after resizing them once, and then serve only the thumbnails on the following loads.
如果您的问题与在运行时调整这些图像服务器端的大小有关,您可能希望在调整大小一次后存储缩略图,然后仅在以下加载时提供缩略图。
40 small images should be no problem for most scripts. 40 full size images getting resized can be a lot of load.
对于大多数脚本来说,40个小图像应该没问题。调整大小的40个全尺寸图像可能会带来很大的负担。
pseudocode:
- user requests an image
- check if thumbnail of that image exists
- if not, create a thumbnail and serve it
- if yes, serve the thumbnail
用户请求图像
检查该图像的缩略图是否存在
如果没有,请创建缩略图并进行投放
如果是,请提供缩略图
You can get the server to cache these images by using apache rewrite to route certain .jpg|.png|etc requests to your resizing script. Other servers undoubtedly have similar features.
您可以通过使用apache rewrite将服务器缓存这些映像,以将某些.jpg | .png | etc请求路由到您的大小调整脚本。其他服务器无疑具有类似的功能。
#1
Loading the images via AJAX will work. You can easily do it using jQuery for example. Define a div for every image you want to display. Perhaps you could display a "Loading.." image or something like that in place of the actual image, when the page is initially displayed.
通过AJAX加载图像将起作用。例如,您可以使用jQuery轻松完成。为要显示的每个图像定义一个div。当最初显示页面时,也许您可以显示“正在加载...”图像或类似的图像来代替实际图像。
There are many options with jQuery. There is a plug-in for lazy loading, you can preload images and you can easily add effects when the image is displayed.
jQuery有很多选项。有一个用于延迟加载的插件,您可以预加载图像,并且可以在显示图像时轻松添加效果。
#2
Make this page area load asynchronously in the background.
使此页面区域在后台异步加载。
#3
Yes, you can defer loading of the images, though you might want to include the regular HTML version inside a <noscript> tag so that simpler user agents/spiders can see your page.
是的,您可以推迟加载图像,但您可能希望在
Another technique is to load the images from a number of subdomains, since browsers typically only open a small number of connections to each domain. For example, if you site is on foo.com, load your static images from a.foo.com, b.foo.com and c.foo.com
另一种技术是从多个子域加载图像,因为浏览器通常只打开到每个域的少量连接。例如,如果您的站点位于foo.com上,请从a.foo.com,b.foo.com和c.foo.com加载静态图像。
#4
I would also consider not showing 30-40 dynamic pictures since neither the server nor the client can effectively cache these pictures.
我也会考虑不显示30-40张动态图片,因为服务器和客户端都无法有效地缓存这些图片。
#5
If your problem is related to resizing these images server side on the run, you might want to store the thumbnails after resizing them once, and then serve only the thumbnails on the following loads.
如果您的问题与在运行时调整这些图像服务器端的大小有关,您可能希望在调整大小一次后存储缩略图,然后仅在以下加载时提供缩略图。
40 small images should be no problem for most scripts. 40 full size images getting resized can be a lot of load.
对于大多数脚本来说,40个小图像应该没问题。调整大小的40个全尺寸图像可能会带来很大的负担。
pseudocode:
- user requests an image
- check if thumbnail of that image exists
- if not, create a thumbnail and serve it
- if yes, serve the thumbnail
用户请求图像
检查该图像的缩略图是否存在
如果没有,请创建缩略图并进行投放
如果是,请提供缩略图
You can get the server to cache these images by using apache rewrite to route certain .jpg|.png|etc requests to your resizing script. Other servers undoubtedly have similar features.
您可以通过使用apache rewrite将服务器缓存这些映像,以将某些.jpg | .png | etc请求路由到您的大小调整脚本。其他服务器无疑具有类似的功能。