Warum habe ich so viel Lag?

Ich habe an dieser neuen Website gearbeitet, aber die "Tasten", die ich verwende, verursachen eine Menge Verzögerung, ich möchte die Verzögerung entfernen, wenn möglich. hierWarum habe ich so viel Lag?

ist die Website: http://lano-project.org/

Der unruhige Code ist hier:

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

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

Quelle

2016-07-23 Lèla Null

BEARBEITEN: Die Verzögerung kommt vom ersten mouseover auf den Knöpfen. –

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

Sie Ihre Reaktionsfähigkeit steigern können, indem nur ein Bild mit beiden Zuständen Ihrer Schaltfläche, die doppelt so groß wie die Schaltfläche selbst ist. Ändern Sie dann bei mouseover einfach die Eigenschaft background-position mit css, anstatt jedes Mal ein neues Bild zu laden. Dies "verschiebt" das Bild effektiv, so dass der richtige Teil davon "durch" den Knopf zeigt. Diese Operation ist sehr schnell und ich denke, Sie werden einen großen Unterschied sehen.

Quelle

2016-07-23 23:30:23

Dieser Ansatz ist ziemlich interessant, ich muss es vielleicht versuchen. –

@ LèlaNull dieser Ansatz ist Industriestandard –

Komprimieren Sie Ihre Bilder und es wird die Website ein wenig schneller geladen.

Poste es auf jsFiddle und spezifiziere das Problem, denn im Moment verstehe ich nicht, was du willst, weil deine Website normal ohne Verzögerung lädt.

Wenn Sie ein Attribut mit Bild erstellen möchten, können Sie den Hintergrund des Attributs ändern oder einfach JS für ... verwenden. Einige coole Sachen, die Sie versuchen zu tun.

EDIT: ich in der Vergangenheit getan haben, ist meine Lösung Hintergrund-Bild zu verwenden und es auf ändern: schweben

http://puu.sh/qc98m/a828b9ae4e.png dass dergleichen.

Quelle

2016-07-23 23:36:09

Es hinkt, wenn Sie über die Bottons Mouseover –

Oh. :) Ich werde es mir ansehen. –

Bearbeitete die Antwort –

Der Mouseover ist nur langsam, wenn Sie die Bilder zum ersten Mal bewegen. Was hinter den Kulissen passiert, ist, dass die neuen (Hover) Bilder nicht in den Zwischenspeicher des Browsers geladen wurden, wenn die geladene Seite beim ersten Mouseover geladen wird und somit die (visuelle) Verzögerung verursacht. Nachfolgende Cursor-Pässe sind so schnell wie normalerweise erwartet.

Eine mögliche Lösung wäre das Laden der Bilder (was natürlich im Hintergrund passieren würde) sofort beim Laden der Seite. Von a similar question:

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

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

Quelle

2016-07-23 23:40:35 Bart

Warum habe ich so viel Lag?

Antwort

Verwandte Themen