css手机端图片样式,优化移动端图片的显示

存在哪些问题?

流量问题, 移动端 "首屏" 最重要, 不要页面一加载, 就把页面上所有图片都load出来, 也许用户根本不会滚动到页面下方去看.

用户上传的图片, 大小参差不齐, 相机拍的照片还好, 如果是网络上的图片, 那真是什么尺寸都有, 怎么保持图片在不变形的情况下还能显示的很漂亮?

页面结构

html 结构很简单, 给 img 标签包裹一个div容器, 并设置一个自定义属性 data-src 用来保存图片的地址, 由于 img 标签没有设置 src 属性, 所以浏览器并不会发送请求.


容器样式

在页面加载出来之后, 图片加载出来之前, 这一段时间, 如果不作任何处理, 用户看到就是一片空白的地方, 然后图片加载完成, 很突兀的出现在用户眼前.

我们的做法是给.img-container, 设置一个背景色或者占位背景图片, 看起来的效果就像这样.

背景色

背景图

.img-container {

background-color: #dddddd;

overflow: hidden;

}

最简单的懒加载