微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

美化加载失败的图片

2016-05-21 20:01 伯乐在线/王浩

(点击上方公众号,可快速关注)


英文:bitsofco.de

作者:伯乐在线 - 王浩

链接:http://web.jobbole.com/86079/


加载失败的图片会很难看。



但事实上并不总是一定要这样。我们可以用 CSS 在 <img> 标签上应用样式,来提供比默认情况更好的体验。


两个关于 <img> 元素的真相


为了搞懂怎么样才能美化加载失败的图片,我们需要先了解关于 <img> 元素的两种表现方式。


1. 我们可以在 <img> 元素上应用常规排版相关的样式。如果图片的备选文本显示的话,这些样式会在其上生效,并且不会影响正常加载的图片。


2. <img> 元素是替换元素。这是一种“外观和大小都由外部资源来决定的元素”(Sitepoint)。因为这个元素是由外部资源所控制,所以 :before 和 :after 伪元素一般不会跟它一起生效。但是,当图片损坏或者没有加载时,这些伪元素就会显示出来。


基于以上这两点,我们能够在 <img> 元素上应用只有当图片加载失败候会显示的样式,正常加载的图片并不会受到影响。


上手练习


利用这一信息,这里有几个美化加载失败图片的例子。需要用到下面这个损坏的链接。


<img src="http://bitsofco.de/broken.jpg" 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) ✓ *


* 备选文本只有在图片的宽度足够容纳它的时候才会显示。如果图片没有指定宽度,备选文本根本不会显示

** 字体样式不生效


至于那些不支持伪元素的浏览器,应用的样式会被忽略,所以它们不会产生破坏。这就是说我们仍然可以为那些使用支持伪元素浏览器的用户应用美化样式,提供更加友好的体验。


译者简介


王浩:phper @深圳

打赏支持作者写出更多好文章,谢谢!



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 浅谈Web缓存
猜您喜欢 猪八戒26亿融资背后的数据驱动力 优秀的程序员不会觉得累成狗是一种荣耀 你不是迷茫,你是自制力不强 我的编程之路 常见面试之机器学习算法思想简单梳理