unterschiedliche Ladezeiten - Tooltip hover / tooltip click [Lösung bitte ohne Java]

halloICKEbins · 29. Januar 2019

Mahlzeit,

ich habe zwei Quellcodes. Bei Quellcode 1 habe ich einen Tooltip, welcher sein Inhalt bei Mouseover in einer Tabellenzelle öffnet. Das Laden der php-Seite dauert bei viel Inhalt (ca. 2000 Zahlen) ca. 3 Sekunden.

HTML

<style>
.tooltip {
cursor: help;
}
.tooltip em {
display: none;
}
.tooltip:hover em {
z-index: 9999;
display: block;
white-space: wrap;
left: 0; top: 0;
margin: 20px 0 0;
color: black;
font-style: italic;
border: 1px dotted black;
padding: 5px;
background: #fff4d1;
}
</style>
<span class="tooltip"> Inhalte anzeigen <em>ca. 2000 Zahlen </em></span>

Alles anzeigen

Quellcode 2 reagiert erst beim Klicken und lädt seinen Inhalt auch in eine Tabellenzelle. Dies dauert aber ca. 1 Minute:

HTML

<style>
#showhide:after {
content: 'Inhalt anzeigen';
display: inline-block;
}
#showhide:checked:after {
content: 'Inhalt verbergen';
}
#showhide:checked ~ #content {
height: 100%
}
#content {
height: 0;
margin: auto;
overflow: hidden;
transition: height 500ms;
}
</style>
<input type="checkbox" id="showhide">
<div id="content">ca. 2000 Zahlen</div>

Alles anzeigen

Warum laden beide Varianten so unterschiedliche lange?
Wie bekomme ich es hin, dass Quellcode 1 auch erst beim Klicken reagiert und wenn außerhalb des Focus geklickt wird, soll es wieder zugehen!?

basti1012 · 1. Februar 2019

hast du die möglichgkeit mal beide version online zu stellen ?

halloICKEbins · 1. Februar 2019

Habe schnell mal was generieren lassen:

Das erste Script benötigt 2 Sekunden, das zweite 10 Sekunden!

PHP

<style>
.tooltip {
cursor: help;
}
.tooltip em {
display: none;
}
.tooltip:hover em {
z-index: 9999;
display: block;
white-space: wrap;
left: 0; top: 0;
margin: 20px 0 0;
color: black;
font-style: italic;
border: 1px dotted black;
padding: 5px;
background: #fff4d1;
}
</style>
<?php for ( $i=1; $i < 2001; $i++ ) { ?>
<table border="1px solid black">
<tr>
<td> <?php echo $i; ?> </td>
<td> <span class="tooltip"> Inhalte anzeigen <em> <?php for ( $z=1; $z < 2001; $z++ ) { echo "Zahl "; } ?> </em></span> </td>
</tr>
</table>
<?php } ?>

Alles anzeigen

PHP

<style>
#showhide:after {
content: 'Inhalt anzeigen';
display: inline-block;
}
#showhide:checked:after {
content: 'Inhalt verbergen';
}
#showhide:checked ~ #content {
height: 100%
}
#content {
height: 0;
margin: auto;
overflow: hidden;
transition: height 500ms;
}
</style>
<?php for ( $i=1; $i < 2001; $i++ ) { ?>
<table border="1px solid black">
<tr>
<td> <?php echo $i; ?> </td>
<td> <input type="checkbox" id="showhide"> <div id="content"> <?php for ( $z=1; $z < 2001; $z++ ) { echo "Zahl "; } ?> </div> </td>
</tr>
</table>
<?php } ?>

Alles anzeigen

basti1012 · 4. Februar 2019

ich habe zwar noch nix getestet aber ich denke mal das es an der id's liegt .Du generierst ja in der Schleife 2000 mal die gleiche id's, das kann nur schief gehen
id="showhide und id="content"

das solltest du mit class machen oder eine id mit fortlaufender Zahl verwenden

PHP

[COLOR=#0000BB][FONT=monospace]<?php [/FONT][/COLOR][COLOR=#007700][FONT=monospace]for ( [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$i[/FONT][/COLOR][COLOR=#007700][FONT=monospace]=[/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]1[/FONT][/COLOR][COLOR=#007700][FONT=monospace]; [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$i [/FONT][/COLOR][COLOR=#007700][FONT=monospace]< [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]2001[/FONT][/COLOR][COLOR=#007700][FONT=monospace]; [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$i[/FONT][/COLOR][COLOR=#007700][FONT=monospace]++ ) { [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]?>
[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace]<table border="1px solid black">[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace] <tr>[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace] <td> [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]<?php [/FONT][/COLOR][COLOR=#007700][FONT=monospace]echo [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$i[/FONT][/COLOR][COLOR=#007700][FONT=monospace]; [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]?>[/FONT][/COLOR][COLOR=#000000][FONT=monospace] </td>[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace] <td> <input type="checkbox" id="showhide<?php echo $i; ?>"> <div id="content[/FONT][/COLOR][COLOR=#000000][FONT=monospace]<?php echo $i; ?>[/FONT][/COLOR][COLOR=#000000][FONT=monospace]"> [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]<?php [/FONT][/COLOR][COLOR=#007700][FONT=monospace]for ( [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$z[/FONT][/COLOR][COLOR=#007700][FONT=monospace]=[/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]1[/FONT][/COLOR][COLOR=#007700][FONT=monospace]; [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$z [/FONT][/COLOR][COLOR=#007700][FONT=monospace]< [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]2001[/FONT][/COLOR][COLOR=#007700][FONT=monospace]; [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]$z[/FONT][/COLOR][COLOR=#007700][FONT=monospace]++ ) { echo [/FONT][/COLOR][COLOR=#DD0000][FONT=monospace]"Zahl "[/FONT][/COLOR][COLOR=#007700][FONT=monospace]; } [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]?>[/FONT][/COLOR][COLOR=#000000][FONT=monospace] </div> </td>[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace] </tr>[/FONT][/COLOR]
[COLOR=#000000][FONT=monospace]</table>[/FONT][/COLOR]
[COLOR=#0000BB][FONT=monospace]<?php [/FONT][/COLOR][COLOR=#007700][FONT=monospace]} [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]?>[/FONT][/COLOR]

Alles anzeigen

ungefähr so ungetestet.
Was soll die 2te Schleife da eigentlich machen ?

halloICKEbins · 6. Februar 2019

Zitat von basti1012

das solltest du mit class machen oder eine id mit fortlaufender Zahl verwenden

Das könnte ich so machen, aber es ändert an dem Grundproblem ja nichts, da er beim Generieren des Codes so viel Zeit benötigt.

Die innere Schleife erzeugt die Zahlen 1-2000 und die äußere Schleife die Zeilen 1-2000.

Tags