存在哪些问题?
流量问题, 移动端 "首屏" 最重要, 不要页面一加载, 就把页面上所有图片都load出来, 也许用户根本不会滚动到页面下方去看.
用户上传的图片, 大小参差不齐, 相机拍的照片还好, 如果是网络上的图片, 那真是什么尺寸都有, 怎么保持图片在不变形的情况下还能显示的很漂亮?
页面结构
html 结构很简单, 给 img 标签包裹一个div容器, 并设置一个自定义属性 data-src 用来保存图片的地址, 由于 img 标签没有设置 src 属性, 所以浏览器并不会发送请求.
容器样式
在页面加载出来之后, 图片加载出来之前, 这一段时间, 如果不作任何处理, 用户看到就是一片空白的地方, 然后图片加载完成, 很突兀的出现在用户眼前.
我们的做法是给.img-container, 设置一个背景色或者占位背景图片, 看起来的效果就像这样.
背景色
背景图
.img-container {
background-color: #dddddd;
overflow: hidden;
}
最简单的懒加载
判断图片是否在可视范围内
把图片的data-src属性的值, 赋值给 src, 然后删掉data-src属性, 以表
