css防止加载图片时下方div发生抖动
2019-05-13 10:38
2947 查看
问题:当用户网速慢或网络不通畅时图片加载前后下方的元素会发生抖动(位移)如下图所示
我们给图片img套个id为wrapper的div标签并设置他的样式
<body> <div id="app"> <div id="wrapper"><!-- 新增的wrapper标签 --> <img src="./timg.jpg" alt="" id="img"> </div> </div> <div> <p>text</p> </div> </body>
<style type="text/css"> #app{ width:240px; } #wrapper{ overflow:hidden; height:0; padding-bottom:66.67%; /* padding-bottom的值为图片的height/width的值 */ /* 此图尺寸为240*160故padding-bottom为160/240=66.67% */ }/* 新增的css样式 */ #img{ width:100%; } </style>
加了这三行css代码表示给即将加载的图片预留了位置并用padding-bottom填充
再次刷新页面问题解决!
相关文章推荐
- css解决设置宽度百分比,高度跟宽度相等,防止内部图片抖动
- div+css 控制图片大小 防止图片撑破div
- css控制背景图片随div的大小而缩放
- DIV+CSS中让布局居中_背景图片居中_文字内容居中
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- css 图片自适应div
- div+css怎么让图片自适应大小
- div+css实现鼠标放上去,背景跟图片都会变化。
- css图片在div内上下居中的方法
- 用图片做div背景的列表布局 CSS代码
- CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
- CSS制作斜角上有背景图片的Div层
- css+div动态图片切换
- CSS解决图片过大撑破DIV的方法
- 解决自适应高度的div里放置图片在下方会有一点空白距离
- CSS实现网页图片预加载
- android listview 异步加载图片并防止错位
- iOS之支持https与ssl双向验证(包含:解决UIWebView加载不了https网页的图片,css,js等外部资源)
- 纯CSS实现图片预加载效果
- 使用CSS实现圆角Div(无图片)