javascript - 关于图片占位背景

Question

假如我有很多个img标签我给他们用了懒加载的功能
但是在移动端懒加载往下拖的时候图片会卡一下过一两秒图片才显示完整
这样的用户体验效果不太好
我只能给每个img外层加多一个p，估定他们的宽度加上灰色背景
这样就不会感觉布局被撑大
但这样就加大了工作量，每个图片都去设置他们的宽高，
有什么好的解决办法吗?

Answer 1

需要lazyload的图片的src统一设置成一个和最终想要显示图片大小一致的小图片，例如black.gif
在需要显示的时候把src替换成真正的图片，这样页面的整体布局不会被坡缓

Answer 2

lazyload的时候，src设置为占位背景，然后另一个变量才是真正的src，图片大小是必须的，在移动端不想撑开最好这样。。或者你可以先定高图片一个值，lazyload后去掉这个，这样就没那么明显了。
其实不是设置高度，而是每次上传都记录宽高。

其实移动端如果对白屏时间没那么高要求，图片又都是jpg的，可以考虑渐进式jpg，这种就是那种加载先模糊，慢慢清晰的。也基本能满足需求。

Answer 3

二十世纪人类数学史上最伟大也是唯一伟大的数学家是谁？-------》查尔斯

Answer 4

page load -> loading.gif
view show -> the real picture

Answer 5

如果在已知img大小的情况下，可以直接设置img的height/width和background-color。

Answer 6

p --> 设置灰色背景或者图片背景
img --> 设置with:100%
js --> 监听img的onload事件，完成时把img src="XX" append到p里面去，这样就避免了卡一下过一两秒图片才显示完整。

不过一般懒加载的话都是给src设置懒加载图，src设置真正要加载的图。实际上也是只需要img 宽度100%即可。