[ERLEDIGT] Laden von Bildern verzögert Ausführung von JS ?

[mds]

Hallo,

als aller Erstes: Bitte entschuldigt, falls mein Beitrag nicht im richtigen Unterforum ist. Das liegt vor allem daran, dass ich nicht genau weiß, was exakt mein Problem verursacht.

Also, es geht um eine simple Datentabelle. Dazu benutze ich das jQuery Plugin DataTables (https://datatables.net/). Mein Problem ist, bei langen Listen, schätzungsweise ab 2000 Einträgen, wird die Tabelle erst nicht korrekt dargestellt, also als ob die .js-Datei noch nciht ausgeführt wurde. Es nach einigen Millisekunden werden die CSS Klassen etc. zugeordnet. Nicht so schlimm, werden einige Sagen, aber ich habe zB eine Spalte mit Infos, die aber nciht angezeigt werden soll. DataTables hat eine Option, dass man Spalten ausblenden kann. Da in dieser Spalte sehr viele Stichworte stehen, fällt diese Verzögerung sehr auf, da das Design dementsprechend "verzerrt" wird.

Ich habe auch schon rausgefunden, woran das liegt: In einer Spalte hab ich ein kleines Icon, es ist in jeder Spalte das gleiche. Wenn ich dieses Icon zB durch Text ersetze, wird sofort alles richtig dargestellt, auch bei mehreren Tausend Einträgen.

Da ich das Icon aber trotzdem gerne verwenden möchte, frage ich mich, wie ich das umgehen kann? Oder steh ich irgendwie auf dem Schlauch? Was mich wundert, da es immer die gleiche, kleine Bilddatei ist, muss er die doch eigentlich nur einmal laden? Oder lädt er sie wirklich jedes mal neu?

Ich habe es schon mit einem Preloader versucht, aber das war auch erfolglos.



Vielen Dank im Vorraus für jeden nützlichen Tipp!



// Nachtrag:

Es scheint so, dass bei sehr, sehr vielen Einträgen dieses Verhalten auch bei reinem Text auftritt. Es scheint als ist die "Gesamtladegröße" ausschlaggebend. Damit entfällt auch die Lösung mit dem text anstelle des Icons.. :/

Es hat auch ncihts mit einer Datenbankabfrage o.ä. zu tun, ich habe es mit reinem HTML getestet, ab 5000 Einträgen spinnt er auch bei reinem Text.

Hilfe... :S

 

[bodil]

Hi mds,
da erwartest du aber eine Menge von deinem jQuery-Plugin. Tabellen mit 2000 Datensätzen waren möglicherweise nicht das, an was gedacht wurde, als das Plugin entwickelt wurde.
Normalerweise werden deine js-Routinen gestartet, wenn die Seite fertig geladen ist. Dass die dann oben noch sichtbar ist, während das js darauf wartet, dass dein Browser unten die Seite fertigbaut, überrascht mich nicht.
Es könnte helfen, dass du im Datei-Head einen kurzen Styleblock einfügst, in dem die Spalten, die in der Tabelle unsichtbar sein sollen, unsichtbar gemacht werden. Dann liegen diese Informationen vor, wenn der Browser die Tabelle schreibt, ohne dass der Browser dafür eine Datei laden muss. Alternativ kannst du die ganze Tabelle mit <table style="display:none" ...> auf die Seite schreiben und sie dann mit js sichtbar machen, wenn sie fertig geladen ist.
Seriösere Lösungsverschläge:

• Mit kürzeren Tabellen und mit Pager arbeiten.
• Statt Bilder einzufügen mit Hintergrundbildern arbeiten. (Bilder möglichst speicherplatzreduziert abspeichern ...)
• Die Daten mittels Ajax auf die Seite schreiben und dabei filtern oder sonstwie vorbearbeiten.
• Mal checken, ob dein Browser-Cache aktiviert ist.

Grüße und viel Erfolg!
Bodil

 

[mds]

Hi bodil,

danke für deine schnelle Anwort! Die Spalte per CSS auszublenden, war schon eine gute Idee, das verhindert schonmal das hässliche verzerren. Das Icon habe ich auch als background-image eingefügt, das erhöht zumindest die Wahrscheinlichkeit, auch bei vielen Einträgen korrekt dargestellt zu werden.

Aber die Variante, die ganze Tabelle erstmal unsichtbar zu machen, würde ich gerne mal austesten. Leider kenne ich mich zu wenig aus, weißt du denn spontan, wie das JS aussehen müsste, um die Tabelle wieder sichtbar zu machen? Was ist das Event?

Grüße

 

[bodil]

naja, du hast jQuery im Einsatz. Wenn du der Tabelle eine ID gibst

<table id="meineRiesenTabelle" style="display:none;" ...> ...

kannst du dieren display:none; aufheben mit

$('#meineRiesenTabelle').css('display', 'block');

Das solltest du allerdings erst ausführen, wenn deine Seite komplett geladen ist:

$(window).load(function () {
  $('#meineRiesenTabelle').css('display', 'block');
});

 

[mds]

Funktioniert einwandfrei, vielen Dank!