我如何使用我的代码图像精灵？ [英] How would I use image sprites with my code?

问题描述

这是我的代码，我将如何获得图像精灵来使用它？我将如何设置它？

我刚刚阅读了这篇文章，这应该解决我遇到的问题，但我不知道如何设置

所有帮助将不胜感激。

代码

p>

https://jsfiddle.net/7amfsp10/

以下是您可以试用的两张图片。

  https ：//i.imgur.com/T9n7wTd.png 
 
 https://i.imgur.com/jkxd2F5.png 
  

解析方案

/jsfiddle.net/7amfsp10/3/

我在乞讨中添加了

 < div style =visibility：hidden; position：absolute> 
< img style =visibility：hidden; position：absolutesrc =http://via.placeholder.com/260x260aria-hidden =truealt => 
< / div> 
  

预加载未来使用的图像。由于浏览器很智能，它不会加载两次相同的图像。因此，我们只是加载页面的图像，然后我们隐藏它，所以它不会被看到，但它已经兑现。

如果你想改变图像只是改变< img> 和js代码中的链接。

＃更新
将属性 aria-hidden =true添加到图像中，以便屏幕阅读器不可见。

 < div style =visibility：hidden; position：absolute> < img style =visibility：hidden; position：absolutesrc =http://via.placeholder.com/260x260aria-hidden =truealt =>< / div><按钮id =playButton2style =display：block; width：266px; height：266px; cursor：pointer; background-color：＃000000; background-image：linear-gradient（to right，transparent 83px，＃0059dd 83px，＃ 0059dd 86px，transparent 86px，transparent 174px，＃0059dd 174px，＃0059dd 177px，transparent 177px）; border：3px solid＃0059dd;onclick =var button = document.getElementById（'playButton2'）; var player = document.getElementById （'player2'）; document.querySelector（'＃playButton2 .initial'）。style.display ='none'; document.querySelector（'＃playButton2 .pause'）。style.display ='none'; document.querySelector '＃playButton2 .play'）。style.display ='none'; player.volume = 1.0; if（player.paused）{playButton2.style.border ='3px solid＃e77d19'; playButton2.style.background ='linear - 渐变（向右，transp arent 83px，＃e77d19 83px，＃e77d19 86px，transparent 86px，transparent 174px，＃e77d19 174px，＃e77d19 177px，transparent 177px），url（\'http：//via.placeholder.com/260x260\\'）' ; playButton2.style.backgroundColor ='transparent'; playButton2.style.backgroundRepeat ='no-repeat'; playButton2.style.backgroundPosition ='center'; document.querySelector（'＃playButton2 .pause'）。style.display ='inline-block'; player.play（）; } else {playButton2.style.border ='3px solid＃e77d19'; playButton2.style.background ='线性渐变（向右，透明83px，＃e77d19 83px，＃e77d19 86px，透明86px，透明174px，＃e77d19 174px，＃e77d19 177px，透明177px），url（\'http： //via.placeholder.com/260x260\ '）'; playButton2.style.backgroundColor ='transparent'; playButton2.style.backgroundRepeat ='no-repeat'; playButton2.style.backgroundPosition ='center'; document.querySelector（'＃playButton2 .play'）。style.display ='inline-block'; player.pause（）; }>< svg class =playstyle =display：none;width =60height =72viewbox =0 0 16 14>< path d =M12.945.38l -.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732zfill =＃1ed760fill-rule =evenodd>< / path>< / svg><< ; svg class =pausestyle =display：none;width =60height =72viewbox =0 0 16 14>< path d =M12.945.38l-.652.762c1。 577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732zfill =＃1ed760fill-rule =evenodd>< / path>< / svg>< svg class =initialwidth =90height =108viewbox =0-10 85 120>< path fill =currentColorstyle =stroke：＃e77d19;笔划宽度：3px的;颜色：黑色; d =M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z>< / path>< / svg> ;< / button>< audio id =player2style =display：none;>< source src =';'type ='audio / mpeg'>< / source>< / audio> ;  

This is my code, how would I get image sprites to work with it? How would I set it up?

I just read about this, and this is supposed to fix the issue I'm experiencing, but I don't know how to set it up.

All help would be greatly appreciated.

Code

https://jsfiddle.net/7amfsp10/

Here are 2 images you can try with it.

https://i.imgur.com/T9n7wTd.png

https://i.imgur.com/jkxd2F5.png

解决方案

https://jsfiddle.net/7amfsp10/3/

I added at the begging

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="">
</div>

That preloads the image that you use in the future. Since browser is smart it won't load the same image twice. So we just load image with the page, then we hide it so it won't be visible, but it's already cashed.

If you want to change the image just change the link inside <img> and in js code.

#Update Add attribute aria-hidden="true" to image to make it invisible for screen readers.

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="">
</div>

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton2');
    var player = document.getElementById('player2');
      document.querySelector('#playButton2 .initial').style.display='none';
      document.querySelector('#playButton2 .pause').style.display='none';
      document.querySelector('#playButton2 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
    playButton2.style.backgroundColor = 'transparent';
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
    playButton2.style.backgroundColor = 'transparent';    
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .play').style.display='inline-block';
    player.pause();
    }">

  <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

</button>

<audio id="player2" style="display:none;">
  <source src=';' type='audio/mpeg'></source>
</audio>

这篇关于我如何使用我的代码图像精灵？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！