僅在直接訪問時才加載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注入SVGs到您的網頁。

或者您可以將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'">;