2

私はモバイル サイトをコーディングし、アイコンに 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;
}

前もって感謝します！

何が起こっているかのプレビュー:ここに画像の説明を入力

4

1 に答える 1

1

ページに SVG を挿入するさまざまな方法を試してください。

または、svgs を png に変換してフォールバックとして使用することもできます - http://callmenick.com/2014/04/02/svg-fallback-with-png/。そして、この方法でフォールバックを使用してsvgsを含めます-

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