>

鼓吹加载退步的图纸

- 编辑:至尊游戏网站 -

鼓吹加载退步的图纸

吹捧加载失利的图片

2016/05/13 · CSS · 图片

本文由 伯乐在线 - 王浩 翻译,sunshinebuel 校稿。未经许可,防止转发!
立陶宛语出处:bitsofco.de。接待到场翻译组。

加载战败的图纸会很无耻。

图片 1

但实际并不总是确定要这样。大家能够用 CSS 在 <img> 标签上应用样式,来提供比默许情状越来越好的体会。

加载败北的图样会很可耻。

多少个有关 <img> 元素的庐山面目目

为了搞懂如何能力美化加载退步的图形,我们必要先了然关于 <img> 成分的三种表现情势。

  1. 我们得以在 <img> 成分上选用常规排版相关的样式。假如图片的预备文本显示的话,那么些样式会在其上生效,况兼不会耳濡目染健康加载的图样。

2. <img> 元素是轮换到分。那是意气风发种“外观和大小都由外界财富来支配的因素”(Sitepoint)。因为那一个因素是由外界财富所决定,所以 :before 和 :after 伪成分常常不会跟它一同生效。不过,当图片损坏恐怕还未有加载时,这一个伪成分就交易会示出来。

依据以上这两点,大家能够在 <img> 成分上行使独有当图片加载退步候会展现的体裁,平常加载的图片并不会遭逢震慑。

图片 2

左侧练习

运用那风姿洒脱音信,这里有多少个美化加载退步图片的例子。供给利用上面这一个损坏的链接。

XHTML

<img src="" alt="Kanye Laughing">

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

但实在并不三番两回鲜明要那样。我们得以用 CSS 在 <img> 标签上应用样式,来提供比暗许情形越来越好的体验。

加多有用的新闻

拍卖加载战败图片的生机勃勃种格局,正是给客户提醒音信来评释图片加载退步了。大家竟然能够行使 attr() 这一语句来呈现图片的链接地址。

图片 3

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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> 元素的庐山面目目

为了搞懂如何技能美化加载失利的图样,大家必要先驾驭关于 <img> 成分的二种表现格局。

  1. 咱俩得以在 <img> 元素上利用常规排版相关的体制。假若图片的筹划文本显示的话,这几个样式会在其上生效,并且不会影响符合规律加载的图纸。

2. <img> 成分是替换来分。那是生龙活虎种“外观和大小都由外界能源来支配的因素”(Sitepoint)。因为那几个成分是由外界财富所调整,所以 :before 和 :after 伪成分日常不会跟它一齐生效。然则,当图片损坏或然未有加载时,那一个伪成分就博览会示出来。

据书上说以上这两点,我们能够在 <img> 成分上利用唯有当图片加载失利候会突显的体裁,平常加载的图片并不会蒙受震慑。

轮换暗中认可的计划文本

抑或,我们得以应用伪成分来替换显示出来的暗许备选文本,通过在暗中认可文本上方放置一个伪成分的情势,使其在视图中回避。

图片 4

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

左边练习

应用那风流浪漫新闻,这里有多少个美化加载失利图片的例子。需求动用上边这一个损坏的链接。

 

XHTML

 

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

 

此外的鼓吹样式

除了这一个之外显示自定义音讯(只怕说换风度翩翩种办法),我们还足以应用伪成分给加载退步的图片应用越来越多的样式。

图片 5

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
}

倘若加载成功,图片会符合规律展现全数的体制。伪成分也统统不会生成。

图片 6

累积有用的音信

管理加载失利图片的风流浪漫种艺术,正是给客商提醒音信来验证图片加载退步了。大家依旧足以接受attr() 这一语句来突显图片的链接地址。

图片 7

 

CSS

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;

}

   

 

浏览器宽容性

很消沉,不是颇负的浏览器都足以用平等的办法管理加载败北的图纸。对于一些浏览器,就算图片并未显现,伪成分也常常有不会显得。

那是自己透过投机的测量试验得出的宽容性结论:

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) ✓ *

* 准备文本独有在图片的上升的幅度丰裕容纳它的时候才会显得。要是图片并未有一点点名宽度,备选文本根本不会来得
* 字体样式不奏效*

至于那多少个不支持伪成分的浏览器,应用的体裁会被忽略,所以它们不会爆发破坏。那就是说我们照样可以为这个运用支持伪成分浏览器的顾客使用美化样式,提供特别团结的感受。

打赏协理自个儿翻译越多好作品,多谢!

打赏译者

轮换暗许的希图文本

要么,大家能够使用伪成分来替换显示出来的暗许备选文本,通过在私下认可文本上方放置三个伪成分的主意,使其在视图中暗藏。

图片 8

 

CSS

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%;

 

}

   

 

打赏帮助作者翻译更加多好作品,多谢!

任选意气风发种支付格局

图片 9 图片 10

2 赞 3 收藏 评论

其余的美化样式

除却体现自定义务消防队息(或许说换生龙活虎种艺术),大家还足以接纳伪成分给加载失利的图纸应用更加的多的样式。

图片 11

 

CSS

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%;

 

  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;}

   

假诺加载成功,图片会正常显示全部的体制。伪成分也完全不会扭转。

图片 12

至于小编:王浩

图片 13

phper @深圳 个人主页 · 我的稿子 · 13 ·  

图片 14

浏览器包容性

很倒霉,不是兼具的浏览器都得以用平等的方法管理加载战败的图形。对于一些浏览器,即便图片并未展现,伪成分也常有不会来得。

那是自己经过投机的测量检验得出的包容性结论:

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) ✓ *

* 备选文本独有在图纸的宽窄丰盛容纳它的时候才会来得。尽管图片并未有点名宽度,备选文本根本不会展现
** 字体样式不见到成效

至于那么些不扶持伪成分的浏览器,应用的体裁会被忽略,所以它们不会发出破坏。那正是说大家照样可认为这些使用扶助伪成分浏览器的顾客选用美化样式,提供更为温馨的经验。

出自:

本文由硬件数码发布,转载请注明来源:鼓吹加载退步的图纸