html怎么帮图片占位,css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图...

如图：

图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。

常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。

做法一

使用 JS 懒加载图片，如果图片加载失败，使用一个默认图占位。

该插件使用 setTimeout 监听页面元素是否显示，如果图片出现在显示区域则执行图片加载。适应常见的 tab 切换，轮播图等。

注意：图片懒加载也是一种页面优化手段，该方案适用于一开始项目立项就有考虑懒加载情况。

做法二

使用 img 伪类 after 和 background 实现占位图。

该方案适用于一些未考虑图片懒加载的项目优化。

比如：页面上某个模块存在很古老，如果去改 html 结构有风险，这时候可以使用 css background 和伪类 after 用占位图去优化显示。

注意：该方案仅适用于 webkit 内核浏览器，对于采用渐进增强的网页比较实用。比如： chrome浏览器，移动端浏览器等。桌面浏览器比如 Firefox、IE 等都不支持 img:after 写法。

效果：

源码：

}.placeholder:after{content:'';position:absolute;width:100%;height:100%;left:0;top:0;background:url('img.png') no-repeat center #999;z-index:3;

}

做法三

直接使用 img background 属性实现占位图。

这种方式有个弊端是图片加载失败时，破图还是显示在页面上，不能挡住。

该方案好处是兼容性强，各种浏览器都支持 img background 写法。

效果：

}

总结

img 标签经常用于加载图片，background 属性及 after 伪对象使用比较少。其实 css 比我们想象中的更强大。

以上使用 css 优化方案需要考虑 png 透明背景情况，如果 png 透明，可能会导致占位图与需要显示的图片重叠。

html怎么帮图片占位,css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图...相关推荐

推荐 5 个火火火火的帮你提高 CSS 技巧项目
1Font-Awesome 这个 70K Star 的开源项目是一个 CSS.SVG.字体的工具箱.在这里你可以找到你任何想要的可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 CSS 的样 ...
css如何设置背景图片？background属性添加背景图片
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
.net的label的背景如何设置成为透明_css如何设置背景图片？background属性添加背景图片...
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
wxss中background属性使用背景图片无效的问题
前提所要实现的效果图如下所示:(两个 view 之间使用两个格式为.png 的绑带图片相连接) 我的实现方式:习惯了通过伪元素设置background属性来实现.基于简便快捷的方式,并没有选择使用 ...
利用BeanUtils在对象间复制属性
commons-beanutils是jakarta commons子项目中的一个软件包,其主要目的是利用反射机制对JavaBean的属性进行处理.我们知道,一个JavaBean通常包含了大量的属性,很 ...
利用反射打印对象一般成员属性值
为什么80%的码农都做不了架构师?>>> 利用反射打印对象一般成员属性值 public static void printVoOrDtoVal(Object obj){ Str ...
html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果（带动画）
效果自上而下渐隐渐现源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...
CSS 技巧，冲鸭！
作者:过冬 https://segmentfault.com/a/1190000019542534 在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学 ...
html怎么把页面和图片居中,css怎么让图片居中？
在前端页面的开发中,图片的显示方法有两种,分别为:img标签显示图片,background属性设置为背景图片显示.那么我们如何使用css设置图片居中呢? css设置背景图片居中: 1.设置背景图片居中 ...

html怎么帮图片占位,css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图...

html怎么帮图片占位,css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图...相关推荐

最新文章

热门文章