美化加载失败的图片(Stying broken images)

翻译 2016年05月25日 10:13:39

原文出处https://bitsofco.de/styling-broken-images/

翻译:王浴昊

注明出处,本文可以转载。


加载失败的图片很丑陋。

事实上并不一定要如此。我们可以通过对<img>元素应用css样式来提供比默认选择更爽的体验。

两个关于<img>元素的事实

为了理解我们可以如何美化加载失败的图片,我们先要搞明白两种<img>元素的表现方式。

  • 1、我们可以将常规的排版相关(typography-related)的样式应用到<img>元素上。如果图片加载失败,这些样式会被应用到备用文本上,如果加载成功的话,这些样式便不会起作用。
  • 2、<img>元素是一个可替换元素这是一种外观和尺寸均由外部资源决定的元素(Sitepoint)。由于这种元素由外部资源所控制,:before:after伪元素通常不会和它同时显示。然而,当图片加载失败的时候,这些伪元素就显现出来了。

基于以上两点,我们才能够对<img>元素应用仅在图片加载失败时才会显示的样式,同时不影响图片的正常加载。

开始实战

基于以上信息,这里提供了一些如何美化加载失败图片的例子。我们用到了下面无效的链接:

<img src="http://bitsofco.de/broken.jpg" alt="alt="Kanye Laughing">

添加有用的信息

我们用来处理加载失败图片的一种方法是提供给用户一条说明图片加载失败的信息。使用attr()表达式,我们甚至可以显示图片的链接地址。

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

替换默认备用文本

另外,我们可以使用以上伪元素来替换默认显示的备用文本,方法是将伪元素放在默认文本之上,将其从视图中遮挡住。

img { /* Same as first example */ }

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

补充美化方法

除了(或者代替)显示自定义信息,我们可以使用伪元素给加载失败的图片应用更多的样式。

img {  
  /* Same as first example */
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

如果图片加载成功,在所有上述样式被应用在该元素上的同时,图片会正常显示。伪元素丝毫不会产生影响。

浏览器兼容性

不幸的是,并非所有的浏览器都按照同样的方式处理加载失败的图片。对于某些浏览器,即使图片没有显示,伪元素也不会出现。

以下是我的测试结果:

Browser Alt Text :before :after
Chrome (Desktop and Android)
Firefox (Desktop and Android)
Opera (Desktop)
Opera Mini ✓ **
Safari (Desktop and iOS) ✓ *
iOS Webview (Chrome, Firefox, others) ✓ *
  • *备用文本只有在图片宽度能够容纳它的时候才会显示。如果没有显式指定图片宽度,备用文本是不会显示的。
  • ** 字体样式不会生效。

对于不支持伪元素的浏览器,应用的特效会被忽略掉,并不会产生什么破坏性影响。这就意味着我们仍然可以对图片加上上面的样式,来对支持该方法的浏览器提供一种更加爽的体验。

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译前言 Broken images are ugly.  But they don’t a...
  • FungLeo
  • FungLeo
  • 2017年02月22日 10:06
  • 1238

img的src如果加载失败后样式的一些解决方案

转载地址:https://bitsofco.de/styling-broken-images/?utm_source=CSS-Weekly&utm_campaign=Issue-206&utm_med...
  • discovery8090
  • discovery8090
  • 2016年12月30日 14:43
  • 1155

js的new Image()做图片预加载

创建一个Image对象:var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片。...
  • lijian820708
  • lijian820708
  • 2014年10月23日 15:39
  • 1204

UIImage加载图片的方式以及Images.xcassets对于加载方法的影响

UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imag...
  • MinggeQingchun
  • MinggeQingchun
  • 2016年08月17日 16:34
  • 293

Cordova页面加载外网图片失败,Refused to load the image

1.使用Cordova页面加载外网图片失败,抛出异常 Refused to load the image 'http://xxx.png' because it violates the follo...
  • u011127019
  • u011127019
  • 2016年05月01日 11:31
  • 5973

使用CFileDialog后相对路径的图片加载失败的问题

这几天被一个很困惑的问题给纠结到 是这样的场景: XP系统启动CFileDialog用来选择一张图片。返回后页面整个程序资源重新加载一次。 问题出现了。关闭这个后所有相对路径的图片都加载失败了!...
  • loseleo
  • loseleo
  • 2012年01月30日 21:04
  • 2063

jquery图片加载失败

JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现(如果因为网络或图片的原因发生异常,则显示该图片)~   判断百度的LOGO是否存在:>如果不存在,则替...
  • stamSuper1
  • stamSuper1
  • 2013年06月21日 21:04
  • 2637

图片加载失败裂开jquery和js的前端处理方法

图片加载失败裂开jquery和js的前端处理方法1.jquery方法 ...
  • jyj1014461394
  • jyj1014461394
  • 2017年07月18日 18:00
  • 461

Django加载静态文件(e.g. images, JavaScript, CSS)

在用Django写网页的时候,需要用到css,js,image文件,为了完整的诠释MVC,肯定是要外部文件引入的了。那怎么引入呢? 最近在用Django,在引入css文件的过程中死了好几次,在百度上...
  • qq_35318838
  • qq_35318838
  • 2017年03月09日 18:24
  • 801

在Images.xcassets 只能用 imageNamed 加载里边的素材 其他方法 你就别费老劲了

1.Images.xcassets中的素材
  • u012371575
  • u012371575
  • 2017年11月20日 18:00
  • 51
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:美化加载失败的图片(Stying broken images)
举报原因:
原因补充:

(最多只允许输入30个字)