なぜ私はそんなに遅れがありますか？

Question

私はこの新しいウェブサイトで作業していますが、私が使用している「ボタン」は多大な遅れを引き起こしています。できるだけ遅れを取り除きたいと思います。

ウェブサイトはここにある：http://lano-project.org/

問題を抱えたコードはここにある：あなたが作成することによって、あなたの応答性を高めることができます

#icon tr td img{ 
    width: 100px; 
    height: 100px;} 
#icon tr td p{ 
    margin: 0px;} 
#icon tr td{ 
    text-align: center; 
    width: 150px;} 
#icon{ 
    margin-left: auto; 
    margin-right: auto;} 

Answer 1

https://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

：関連CSSで

<td> 
    <a href="templink-info.html"> 
    <img style="display: none" src="images/icons/hover-info.png"/> 
    <img src="images/icons/info.png" 
     onmouseover="this.src='images/icons/hover-info.png'; 
      document.getElementById('home_text').style.display = 'none'; 
      document.getElementById('info_text').style.display = 'block';" 
     onmouseout="this.src='images/icons/info.png'; 
      document.getElementById('home_text').style.display = 'block'; 
      document.getElementById('info_text').style.display = 'none';" 
     onclick=""/> 
    </a> 
    <h3>Info</h3> 
</td> 

両方の状態を持つ1つの画像のみボタン自体の2倍の大きさのボタンをクリックします。次に、マウスオーバーで、毎回新しいイメージを読み込む代わりに、cssを使ってbackground-positionプロパティを変更するだけです。これにより、画像の実際の部分がボタンの「通過」するように効果的に画像がスライドされます。この操作は非常に高速で、大きな違いがあると思います。

Answer 2

画像を圧縮すれば、ウェブサイトの読み込み速度がさらに速くなります。

jsFiddleに投稿して問題を指定してください。なぜなら、あなたのウェブサイトは通常遅れなくロードされるため、何を望んでいるのか分かりません。

イメージで属性を作成する場合は、属性の背景を変更するか、JSを使用して、やりたいことをやってみてください。

EDIT：そのような

http://puu.sh/qc98m/a828b9ae4e.pngを置く：私が過去にやった、私の解決策は、背景画像を使用して、それを変更することです。

Answer 3

初めてマウスを動かすとマウスオーバーが遅くなります。舞台裏で起こっていることは、ページがロードされ、最初のマウスオーバー時にロードされなければならないときに新しい（ホバー）イメージがブラウザのキャッシュにロードされず、（視覚的な）遅れが生じることです。後続のカーソルのパスは、通常予想されるほど高速です。

可能な解決策の1つは、ページが読み込まれた直後に画像をプリロードすることです（バックグラウンドではっきりと起こります）。 a similar questionから：

function preloadImage(url) 
{ 
    var img=new Image(); 
    img.src=url; 
} 

preloadImage('images/icons/hover-info.png');