 |
1
markmx Oct 8, 2012
如何你把图片的隐藏交给了前段去解决的话。那么隐藏抖动，是肯定会发生的。
1.目前的抖动有写生硬。你可以做效果变化，变得柔软些。或者会好点。 2.图片既然已经订好了规格了。那就缩略图的方式呈现吧。。不要让前端去进行处理了！这个用户体验会好些。 |
 |
2
AlloVince Oct 8, 2012
话说你们走光了
 |
 |
5
catfan Oct 8, 2012
在HTML里img元素添加width和height的属性，这样就能在图片载入之前就定好图片所占用的空间，不会做成页面的“抖动”。
<img width="280" height="320" src="xxx.jpg"/> 当然，你要预先想办法保存或获取这些图片的宽高。 另外一个方案是预先生成统一规格（固定宽高）的缩略图。 |
 |
7
kamal Oct 8, 2012
引用自糖饼的博客《再谈javascript图片预加载技术》
十多年的上网经验告诉我：浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕，并且不需要预设width与height属性，因为浏览器能够获取图片的头部数据。基于此，只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。 原理 http://www.planeart.cn/?p=1121 jQuery插件 http://www.planeart.cn/?post_type=post&p=1157 |
 |
9
wong2 Oct 8, 2012
手机上不方便看代码，先根据我对帖子的理解说下：
加载图片之前设置visibility为hidden，然后图片onload之后用js处理之，完了之后再显示。 |
 |
10
yulanggong Oct 8, 2012
可以用 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; } |
 |
12
moyaya OP @yulanggong 虽然测试下来，不能解决问题，但仍然得真心的感谢：）
|
 |
13
chone Oct 8, 2012
可以考虑在图片加载完成的时候就马上处理他，用img的onload和onerror事件来做。
然后这样的处理会有两种办法，一种是加载完的图片马上就在列表中现实，这样显示的顺序可能就与逻辑顺序不同，还有一种办法就是给图片坐上loading效果，这样就不必担心顺序的问题，不过有抖动的问题。 |
 |
14
bengle Oct 8, 2012
图片有onload事件，可以试试
|
|
15
yulanggong Oct 8, 2012
@moyaya 竟然不能解决，好吧，应该是我问题理解错了
|
Select Language