前端高手乱入，请教一个问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4431 天前的主题，其中的信息可能已经有所发展或是发生改变。

我们网站集市（http://www.sogoke.com/bazaar/），限制了图片的宽度为220，高度为260，目前的处理办法为：先加载所有图片，再执行对图片隐藏一部分的JS，用window.onload 和 $(window).load 等图片加载完了再执行对图片的处理，所以会看见一个执行过程，用户体验不是很好。

而如果用$(function(){ }) 的话，先执行JS的话，很多时候JS执行完了，但图片却没加载完，会有错位，或JS不执行。

想请教一下，有什么办法，可以让JS去掉这个JS执行过程中的抖动（不太好描述，可以到页面去感受一下），谢谢先

执行

请教

19 条回复 • 1970-01-01 08:00:00 +08:00

markmx

2012-10-08 09:56:21 +08:00

如何你把图片的隐藏交给了前段去解决的话。那么隐藏抖动，是肯定会发生的。
1.目前的抖动有写生硬。你可以做效果变化，变得柔软些。或者会好点。
2.图片既然已经订好了规格了。那就缩略图的方式呈现吧。。不要让前端去进行处理了！这个用户体验会好些。

AlloVince

2012-10-08 09:58:37 +08:00

话说你们走光了

moyaya

2012-10-08 10:22:20 +08:00

@AlloVince 谢谢，已经修正了

moyaya

2012-10-08 10:23:16 +08:00

@markmx 嗯，因为这个只是一个过渡的方案，所以尝试从前端解决。

catfan

2012-10-08 10:42:16 +08:00

在HTML里img元素添加width和height的属性，这样就能在图片载入之前就定好图片所占用的空间，不会做成页面的“抖动”。

<img width="280" height="320" src="xxx.jpg"/>

当然，你要预先想办法保存或获取这些图片的宽高。

另外一个方案是预先生成统一规格（固定宽高）的缩略图。

moyaya

2012-10-08 11:27:01 +08:00

@catfan 固定高度，图片会有压缩的感觉吧？

kamal

2012-10-08 11:38:25 +08:00

引用自糖饼的博客《再谈javascript图片预加载技术》
十多年的上网经验告诉我：浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕，并且不需要预设width与height属性，因为浏览器能够获取图片的头部数据。基于此，只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
原理 http://www.planeart.cn/?p=1121
jQuery插件 http://www.planeart.cn/?post_type=post&p=1157

catfan

2012-10-08 11:51:40 +08:00

@moyaya 只要裁剪算法正确，就不会产生压缩感。可以看看其它国外社区网站图片的裁剪效果....

wong2

2012-10-08 12:00:11 +08:00

手机上不方便看代码，先根据我对帖子的理解说下：
加载图片之前设置visibility为hidden，然后图片onload之后用js处理之，完了之后再显示。

yulanggong

2012-10-08 13:27:18 +08:00

可以用 CSS 来达到你所要的效果，不需要用 JS。给 img 套一层标签，比如 span ，然后

span {
display: block;
position: relative;
max-height: 260px;
overflow: hidden;
}

IE6 不支持 max-height，如果需要考虑 IE6 可以用 expression 或 JS 处理，当然也可定高或高度不限

img {
position: absolute;
bottom: 0;
width: 220px;
}

我发现你每行图片用了一次 ul，其实没必要这样，用一个 ul 就可以了。

li {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: top;
}

moyaya

2012-10-08 18:09:16 +08:00

@kamal 太感谢啦，问题解决啦

moyaya

2012-10-08 18:10:24 +08:00

@yulanggong 虽然测试下来，不能解决问题，但仍然得真心的感谢：）

chone

2012-10-08 18:19:59 +08:00

可以考虑在图片加载完成的时候就马上处理他，用img的onload和onerror事件来做。
然后这样的处理会有两种办法，一种是加载完的图片马上就在列表中现实，这样显示的顺序可能就与逻辑顺序不同，还有一种办法就是给图片坐上loading效果，这样就不必担心顺序的问题，不过有抖动的问题。

bengle

2012-10-08 20:14:51 +08:00

图片有onload事件，可以试试

yulanggong

2012-10-08 20:40:44 +08:00

@moyaya 竟然不能解决，好吧，应该是我问题理解错了

icerunz

2012-11-03 13:52:28 +08:00

@moyaya 求问手工客后台程序的细节：）

moyaya

2012-11-03 20:22:58 +08:00

@icerunz 那方面的？

icerunz

2012-11-03 23:33:07 +08:00

@moyaya 语言，所用技术
有个类似的想法，其他行业垂直的，想问问，呵呵。

moyaya

2012-11-04 22:22:32 +08:00

@icerunz Python,Django,nginx，redis，celeery...

都是常用的东西吧