图片的延迟加载 lazyload 的占位图都是固定大小的，怎么让占位图与要加载的实际图片尺寸一致

[xiaoyong]

如题。因为目前使用 lazyload 的 js 插件都是占位图固定尺寸的，如果占位图与需要加载的图片尺寸差别很大的话， 会出现页面的内容跳动。目前微信公众号的文章就解决的很好，占位图都是灰色的，但是尺寸与要加载的实际图片尺寸一致，加载出来的效果比较平滑。目前，可以想到的一个方法是让前端提供当前设备的浏览器宽度，然后计算高度。感觉还是不太靠谱。大家有没有更好的思路。多谢。

[loveyu]

首先你得知道图片显示的宽高

[Jaylee]

我这边目前也是使用让接口返回宽和高，然后加载占位图的，应该没有其它的办法了吧

[zhicheng]

固定高度计算宽带更合理。

[SourceMan]

让服务器给你返回

[paloalto]

AMP https://www.ampproject.org/

[yushiro]

其实需要知道的并不是图片的宽高，而是需要知道图片的宽高比，设计 api 的时候需要多带一个参数返回前端

[qgy18]

移动端需要知道高宽比，根据宽算出高来。

[Light3]

可你尝试固定宽度 比如就 100PX 这样的 毕竟手机基本上就是一张图一行

[fakefish]

如果图片是个正方形，可以用个 1px 的 base64 自动填充了

[Shy07]

有一种图片叫渐进 jpg ，还有一种叫交错 png/gif

[wjfz]

我倒是有种想法不知道可行性，请大家给予批评。

存图片的时候把宽高写入文件名，前端正则出宽高然后占位。

[learnshare]

提前把图像大小写到 HTML 内敛样式中，前提是页面由后端渲染，并且数据库里保存了图像大小

[skywatcher]

之前有想过这个问题，主要是避免加载的抖动，我感觉可以这样
http://7ximdq.com1.z0.glb.clouddn.com/1445326252487#w=1000#h=900
开始 URL 都已经传到前端，可以通过#w=1000#h=900 获取数据来设置占位大小（根据固定宽度或高度），动态加载图片时就不会出现抖动

不过需要后端服务器的支持，保存和处理返回的 URL 附带这些参数

知乎跳转到对应答案和评论就是这样实现的
http://www.zhihu.com/question/36173438/answer/68338175?group_id=647004140790923264#comment-102845723

[skywatcher]

忽然想到，如果使用第三方服务器也可以，第三方是支持获取指定图片的信息的，可以自己请求后添加到 URL 尾部，前端就可以使用了