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注入您的网页。

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

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