架构设计-如何架设高效图片浏览系统?

架构设计-如何架设高效图片浏览系统?

甜柠檬 发布于 2017-03-03 字数 323 浏览 1060 回复 5

开发一个图片浏览的静态页面,页面就有 上一个图,下一个图按钮。图片存储在服务器端,如何设置出最高效率的图片浏览。

要求:
1、首次打开页面时加载内容不能太多;
2、如何能使用户感觉到图片加载延迟最小;
3、目前我能想到的就是多线程,多队列,但不知道如何实现;
4、可以使用ajax 异步读取web服务器;

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

晚风撩人 2017-08-08 5 楼

如果是单图浏览界面,那就处理好预读吧。如果是多图浏览界面,就得解决好多线程下载和连接复用。不管哪种,不要忘了CDN这个最有效的手段。

灵芸 2017-08-06 4 楼

你说的多线程多队列是什么东西?
感觉你不懂一些技术,却非要把这些技术扯到这问题上。
一种方案如下:
只加载一张图片,然后根据用户行为(cookie?用户感兴趣的图片?用户上一次的翻页动作?)来加载下一张图片到浏览器缓存。

想挽留 2017-07-02 3 楼

还可以把图片的格式改为gif或者运用cdn。你在使用ajax预读的时候也可以多读几张。若图片真的很大你可以把图片切成多张,分别显示让用户在看到图片在加载。

泛泛之交 2017-05-24 2 楼

我也提供点粗略建议:
页面展示的缩略图尽量压缩,很多img处理类可以做到让同样肉眼看到效果一样的图片降低体积50%以上,页面按照大部分浏览习惯顺序采用延迟加载
预加载图片可以提升用户体验,进度条可以让用户知道加载的进展,避免用户的冷落感。另外,jQuery提供了大批优秀组件,进度条就是其中一个,只需简单的配置就可以满足我们的需求,并且可以避免了图片加载过程中页面的闪烁、破裂(视觉上)等问题

夜无邪 2017-05-08 1 楼

这个好像没有什么特别好的用法,好像很多网站都是刚打开这个页面就先打开第一张图,当第一张图片加载完后通过Ajax加载第二张,当点击第二张时就显示已经加载完的第二张图,顺便再去请求第三张,点击第三张的时候加载第四张,依此类推......,做到图片预加载。这好像是目录的解决方案,但就算这样也会有用户看图的速度比图片加载更快的情况。因为这个瓶颈在于图片的网络传输。所以除了预加载好像没有其它办法,如果瓶颈是在服务器端,那就是另外一回事了。