之前做React Native 的时候问就遇到过一个问题
通过 web 获取的 image 不能和 浏览器一样通过百分比设置 width 来自适应 height,
(浏览器 默认是先渲染1个 1×1 px 的点)
React Native 官方文档解释, 为了更好的用户体验之类的,
不让页面文档被加载的图片完成时挤压下去,
所以所有非本地 <Image/> 组件必须先指定宽高,
否则无法显示出来 实际就是 0×0px.
(本地图片可以不指定, 它默认会根据自己的图片实际宽高显示)
用过 IScroll 的都知道, 有一个 refresh() 方法, 一般是当 DOM 改变(Ajax 之类的)的时候通过改方法重新计算 scrollHeight 的高度.
这也是为什么 IScroll 官方例子是在 body.onload 事件里 初始化 IScroll
但是 新 DOM 内有图片元素的话, 还需要再次监听 img.onload 事件
再次执行 refresh() 方法
实际操作中就将使用 2次 refresh()
- ajax DOM 改变的时候需要
refresh() - image.onliad 再次
refresh()
那么这个 refresh() 写多了真的不爽
所以现在在写 webapp 的时候 推荐使用把 占位容器 高度写死, 这样就可以避免监听img.onload 事件
配合 vw vh 单位, 这样也能做到自适应高度
当然对图片数据的比例就要求统一了
当然 也可以使用 background-clip或者 object-fit 属性来使图片相对居中显示
[lang=jade]
.img-box
img(src="...")
[lang=stylus]
.img-box
width 50vw
height 50vw
overflow hidden
backgroun-image url('/*loading图片*/')
img
width 100%
min-height 100%
object-fit cover
- 面对 React Native 必须指定高度, 没办法我稚嫩好选择妥协
- 使用 IScroll 上拉再加更多/下拉刷新 功能时, 我觉得这样做是有意义的
