Langsam Jquery-Animation
Habe ich diese Webseite : http://miloarc.pyrogenicmedia.com/
Welche atm ist nichts besonderes. Es hat ein paar Effekte, aber keine, die die bank brechen.
Wenn Sie mit der Maus über eine Kachel, Sie sollten ändern Sie die Deckkraft, um es einen fade-Effekt. Dies erfolgt durch den Jquery-Animation, nicht durch CSS (ich mache das so, es kann verblassen, anstatt eine gerade ändern). Sieht alles nett aus, wenn die Seite geladen wird, und die verblasst look perfekt. Infact, wenn Sie ziehen Sie die Maus ganz über dem Platz, wenn Ihnen ein "trail" fast wie eine Schlange.
Trotzdem, Mein Nächstes problem ist, dass Sie werden sehen, es ist ein Feld in der linken oberen, die wird Ihnen sagen, Informationen über die Kachel, die Sie schweben über. Dies scheint gut zu funktionieren. Wenn Sie mit der Maus über die info-box, wechselt es die position (So dass Sie erreichen können, die Fliesen, die zuvor verborgen waren darunter). Von meinem Verständnis ist dies alles gut funktioniert, und auf den Brief.
Jedoch Nach einem verschieben der info-box (Eine hover). Anzeigen der Seite in Firefox dreht slugish. So, nach einem erfolgreichen Umzug der info-box, die fade-Effekte sehr stotterte, und es nicht abholen Ereignisse so schnell, das heißt, Sie können nicht zeichnen eine "Spur" auf dem Bildschirm.
Chrom nicht dieses Problem haben. Es scheint gut zu funktionieren, egal was. Safari scheint auch ok. Obwohl ich merke, wenn ich meine Maus sehr schnell, es hat ein bisschen springen, aber nicht so viel wie firefox.
Internet explorer funktioniert überhaupt nicht. Scheint, um den browser zum Absturz bringen... Und es ist ein Fehler mit der gerundeten Ecke-plugin im Einsatz (Nicht sicher, warum...).
Alles in allem denke ich, dass was auch immer ich Tue in meinem code muss stark träge. Aber ich weiß nicht, wo es passiert ist.
Hier ist der vollständige code, aber ich würde Ihnen raten, gehen Sie auf den link um alles.
<script type="text/javascript">
$(document).ready(function()
{
var WindowWidth = $(window).width();
var WindowMod = WindowWidth % 20;
var WindowWidth = WindowWidth - WindowMod;
var BoxDimension = WindowWidth / 20;
var BoxDimensionFixed = BoxDimension - 12;
var dimensions = BoxDimensionFixed + 'px';
$('.gamebutton').each(function(i)
{
$(this).css('width', dimensions);
$(this).css('height', dimensions);
});
var OuterDivHeight = BoxDimension * 10;
var TopMargin = ($(window).height() - OuterDivHeight) / 2;
var OuterDivWidth = BoxDimension * 20;
var LeftMargin = ($(window).width() - OuterDivWidth) / 2;
$('#gamePort').css('margin-top', TopMargin).css('margin-left', LeftMargin).css('margin-right', LeftMargin);
$('.gamebutton img').each(function(i)
{
$(this).hover(
function () {
$(this).animate({'opacity': 0.65});
},
function () {
$(this).animate({'opacity': 1});
}
);
});
$('.rounded').corners();
$('.gamebutton').each(function(i)
{
$(this).hover(function()
{
$('.gameTitlePopup').html($(this).attr('title'));
FadeActive();
});
});
function FadeActive()
{
$('.activeInfo').fadeIn('slow');
}
$('#gameInfoLeft').hover(function()
{
$(this).removeClass('activeInfo');
$(this).fadeOut('slow', function()
{
$('#gameInfoRight').addClass('activeInfo');
FadeActive();
});
});
$('#gameInfoRight').hover(function()
{
$(this).removeClass('activeInfo');
$(this).fadeOut('slow', function()
{
$('#gameInfoLeft').addClass('activeInfo');
FadeActive();
});
});
});
</script>
Vielen Dank für jede Hilfe :).
BEARBEITEN : Nur re-iterieren, was ich meine. Ich bin auf der Suche, um zu wissen, warum es geht nur träge nach dem verschieben der info-box. Bevor dies alles ist absolut in Ordnung. Nach dem Umzug der box (Und schiebt es zurück), die UI nur wird super langsam.
Du musst angemeldet sein, um einen Kommentar abzugeben.
jQuery läuft schneller als class-Selektoren spezifischer sind.
$('.activeInfo')
sucht alles in die DOM für die spezielle Klasse, sondern$('div.activeInfo')
nur wählt die div(s), dann ist die Teilmenge von divs, die haben die passende Klasse.Haben Sie auch eine gerundete Ecken Skript aktiv auf all diese gleichen divs, die wahrscheinlich reduziert sich die Leistung beim Rendern.
Ihre performance-Ergebnisse scheinen zu Recht auf der ganzen Linie, wie erwartet. Chrome ist am schnellsten, dann Safari, Firefox, IE. (Obwohl Safari 5, die wurde heute veröffentlicht wird, sagt, ist das vergleichbar mit Chrom.)
Vielleicht jemand anderes noch andere Ideen, aber das einzige was ich mir vorstellen könnte, wäre die Verkürzung der Dauer der animation, so dass jeder endet schneller und es gibt weniger überschneidungen.
Nicht sicher, wie viel es hilft, aber es kann sein, lohnt sich ein Schuss.
Zur info - Beim einrichten der event-Handler auf ein jQuery-Objekt repräsentiert eine Menge von Elementen, die Sie nicht brauchen, zu verwenden
each()
. Sie können für die Bindung einmal auf den gesamten Satz. Anstatt also diese:hierzu:
Es wird nicht helfen, Ihre performance-problem, aber es ist die richtige Art und Weise zu beeinflussen sets von Elementen.
stop()
bevor die Animationen wie:$(this).stop().animate({...
. Nur ein weiterer Schuss im Dunkeln, fürchte ich. Oder vielleicht testen, um zu sehen, ob Sie animieren:if( !$(this).is(':animated') { $(this).animate({...
. Letztlich, langsamen js-engines sind gerade dabei, langsam zu sein. 🙁Javascript kann einfach nicht in der Lage sein zu handhaben, was Sie tun. Aber geben Sie nicht auf, bevor Sie versuchen, ein paar Dinge:
Versuchen, die
hover()
Funktion ändern Sie die Deckkraft sofort, und verwenden Sie dann den fade nur auf die "unhover()" übergang. Dies wird dann zu spüren, bissig, aber auch glatt. Ich würde versuchen, dass, wie das wird reduzieren Sie Ihre Verarbeitung fast die Hälfte, und kann es genug sein.Blick auf die
animate()
Methode. Man kann sagen, es zu füllen Sie alle Laufenden Animationen, bevor die nächste animation. Also auf zu schweben, haben es zu beenden alle anderen Animationen, bevor die nächste animation. Dies ist nicht ideal, aber wird es zu reduzieren Ihre "Schwanz" aus ziehen. Dies ist ein wenig inkompatibel mit dem ersten Vorschlag, so Ihr Urteil.Die "Deckkraft" - Funktionalität im IE wird eine "filter". Ich weiß nicht, die details, aber es fühlt sich schwerer an Gewicht als raw Javascript. Es ist sehr problematisch, wenn Sie versuchen, text in den Boxen. Trotzdem, müssen Sie möglicherweise versuchen, andere Ansätze. Sie können einfach brauchen, um verschiedene Ansätze auf unterschiedlichen Browsern, verlieren ein bisschen von der animation über den Browser, die können damit nicht umgehen.
Kann es einige Verfahren zum erstellen einer "animate gif", dass der fading-Effekt. Nicht sicher, über diesen Ansatz-- nur eine Idee.
Alle, dass gesagt wird, ich Baue eine sehr ähnliche Seite, mit 17 Bildern in einer Zeit, cross-fading zu 17 anderen Bilder. Es funktioniert gut auf allen Browsern. Unser design, obwohl, ist ein wenig mehr zu vergeben-- die Kanten nicht so hart.
Glück. Ich werde wieder überprüfen, wenn ich keine anderen Ideen.