爲什麼我有這麼多的滯後？

我一直在這個新的網站上工作，但我使用的「按鈕」造成了大量的滯後，如果可能的話，我想刪除滯後。爲什麼我有這麼多的滯後？

混亂的代碼是在這裏：

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

相關CSS：

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

來源

2016-07-23 Lèla Null

編輯：滯後來自按鈕上的第一個mouseover。 –

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

您可以通過創建提高你的反應能力只有一個圖像具有兩種狀態你的按鈕的大小是按鈕本身的兩倍。然後，在mouseover上，只需使用css更改background-position屬性，而不是每次都加載一個新圖像。這有效地「滑動」圖像，使其正確的部分顯示「通過」按鈕。這個操作非常快，我認爲你會看到很大的不同。

來源

2016-07-23 23:30:23

這種方法非常有趣，我可能需要嘗試一下。 –

@LèlaNull這種方法是行業標準 –

壓縮你的圖像，它的網站會加載更快一點。

將它發佈到jsFiddle並指定問題，因爲現在我不明白你想要什麼，因爲你的網站正常加載沒有任何滯後。

如果你想創建一個圖像的屬性，你可以改變屬性的背景或只是使用JS ..一些很酷的東西，你正在嘗試做。

編輯：我在過去所做的那樣，我的解決方法是使用背景圖片，改變它：懸停

http://puu.sh/qc98m/a828b9ae4e.png這樣。

來源

2016-07-23 23:36:09

它滯後於當你鼠標移動的時候 –

哦。 :)我會看看它。 –

編輯答案 –

第一次懸停圖像時，鼠標懸停速度很慢。幕後發生的事情是，當頁面加載時，新的（懸停）圖像沒有加載到瀏覽器的緩存中，必須在第一次mouseover時加載，從而導致（視覺）延遲。隨後的光標傳遞速度與通常預期的一樣快。

一個可能的解決方案是在頁面加載時立即預加載圖像（顯然會發生在後臺）。從a similar question：

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

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

來源

2016-07-23 23:40:35 Bart

爲什麼我有這麼多的滯後？

回答

相關問題