2

I am coding a mobile site and using SVG's for the icons, however Some of the icons only display when visited directly, The only thing I can think is that the image request is failing first time round...

I have tried preloading them with no luck any ideas?

The code is below: (NOTE: the css duplicates, i.e. background size, position etc... will be different for each that's why they are being replicated.)

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

Thanks in advance!

preview of what's happening: enter image description here

4

1 回答 1

1

尝试不同的方法将 SVG 注入您的页面。

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

<img src="svg/icon.svg" onerror="this.src='fallbackPng/icon.png'">;
于 2014-11-04T11:49:26.633 回答