css - SVG 图像仅在直接访问时加载

Question

我正在编写一个移动网站并使用 SVG 作为图标，但是有些图标仅在直接访问时显示，我唯一能想到的是图像请求第一次失败...

我试过预加载它们但没有任何想法？

代码如下:(注意:css 重复项，即背景大小、位置等...每个都不同，这就是它们被复制的原因。)

<div class="profileItems">
 <a class="shuffleProfileItem" href="javascript:{}" data-loc="shuffle">
  Shuffle Feeds
  <span></span>
 </a>
 <a class="notificationsProfileItem" href="javascript:{}" data-loc="notifications">
  Notifications
  <span></span>
 </a>
 <a class="neighborhoodsProfileItem" href="javascript:{}" data-loc="neighborhoods">
  Neighborhoods
  <span></span>
 </a>
 <a class="interestsProfileItem" href="javascript:{}" data-loc="interests">
  Interests
  <span></span>
 </a>
 <a class="messagesProfileItem" href="javascript:{}" data-loc="messages">
  Messages
  <span></span>
 </a>
 <a class="photosProfileItem" href="javascript:{}" data-loc="photos">
  Photos
  <span></span>
 </a>
 <a class="neighborsProfileItem" href="javascript:{}" data-loc="neighbors">
  Neighbors
  <span></span>
 </a>
 <a class="friendsProfileItem" href="javascript:{}" data-loc="friends">
  Friends
  <span></span>
 </a>
 <a class="settingsProfileItem" href="javascript:{}" data-loc="settings">
  Settings
  <span></span>
 </a>
</div><!-- End profile items -->

CSS:

.profileItems a {
  display:block;
  background:#F2F2F2;
  margin:0 0 0.1em 0;
  padding:1em 1em 1em 2.8em;
  color:#595959;
  font-weight:bold;
  font-size:0.8em;
  opacity:0;
}
.profileItems a span {
 display:block;
 background:url(svg/goArrow.svg) no-repeat;
 background-size:1em;
 float:right;
 height:1.5em;
 width:1em;
 margin:-0.1em 0 0 0;
}
.shuffleProfileItem, .notificationsProfileItem, .neighborhoodsProfileItem,
.interestsProfileItem, .messagesProfileItem, .photosProfileItem,
.neighborsProfileItem, .friendsProfileItem, .settingsProfileItem {
 background-repeat:no-repeat!important;
 background-size:1.8em;
 background-position:0.5em!important;
}
.shuffleProfileItem {
 background-image:url(svg/feeds.svg)!important;
}
.notificationsProfileItem {
 background-image:url(svg/holla.svg)!important;
}
.neighborhoodsProfileItem {
 background-image:url(svg/neighborhoods.svg)!important;
}
.interestsProfileItem {
 background-image:url(svg/interests.svg)!important;
}
.messagesProfileItem {
 background-image:url(svg/message.svg)!important;
}
.photosProfileItem {
 background-image:url(svg/photo.svg)!important;
}
.neighborsProfileItem {
 background-image:url(svg/neighbors.svg)!important;
}
.friendsProfileItem {
 background-image:url(svg/friends.svg)!important;
}
.settingsProfileItem {
 background-image:url(svg/settings.svg)!important;
}

提前致谢!

预览:

Answer 1

试试 different methods将 SVG 注入(inject)您的页面。

或者您可以将 svg 转换为 png 并将它们用作后备 - http://callmenick.com/2014/04/02/svg-fallback-with-png/ .并以这种方式包含带有 fallbaks 的 svgs -

<img src="svg/icon.svg" onerror="this.src='fallbackPng/icon.png'">;