Jak zmniejszyć rozmiar DOM ładując tylko pierwszą stronę tabeli ?, Jak ładować pierwszą stronę tabeli, a pozostałe po kolejnym kliknięciu Opcje

[Blasius]

Posiadam stronę z prawie 2000 elementami DOM (węzłów), na której znajduje się między innymi prosta tabela napisana za pomocą jQuery z ponad 300 linkami do innych podstron (wzorowana na:)
https://jqueryui.com/tabs/#default
Oto jej układ:

[HTML] pobierz, plaintext 
<div id="tabs">
<ul><li><a href="#tabs-1" >Al-Ar</a></li>
<li><a href="#tabs-2" >Ar-D</a></li>
<li><a href="#tabs-3" >E-Ha</a></li>
<li><a href="#tabs-4" >Ha-J</a></li>
<li><a href="#tabs-5" >K-Mo</a></li>
<li><a href="#tabs-6" >Mo-Ro</a></li>
<li><a href="#tabs-7" >Ro-So</a></li>
<li><a href="#tabs-8" >So-Su</a></li>
<li><a href="#tabs-9" >Su-Z</a></li></ul>
<table class="tablica_X">
<tbody>
<tr class="tr1"><td></td></tr>
<tr class="tr"><td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Al..Ar</td></tr>
<tr> <td class="td1"><a href="hotel1.html">hotel 1</a></td>
<td class="td2">1</td></tr>
<tr> <td class="td1"><a href="hotel2.html">hotel 2</a></td>
<td class="td2">2</td></tr>
...
<tr> <td class="td1"><a href="hotel20.html">hotel 20</a></td>
<td class="td2">20</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel21.html">hotel 21</a></td>
<td class="td2">21</td></tr>
...
<tr> <td class="td1"><a href="hotel30.html">hotel 30</a></td>
<td class="td2">30</td></tr>
</tbody>
</table>
</div>
<div id="tabs-2">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Ar...D</td></tr>
<tr> <td class="td1"><a href="hotel31.html">hotel 31</a></td>
<td class="td2">31</td></tr>
...
<tr> <td class="td1"><a href="hotel51.html">hotel 51</a></td>
<td class="td2">51</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel52.html">hotel 52</a></td>
<td class="td2">52</td></tr>
...
<tr> <td class="td1"><a href="hotel105.html">hotel 105</a></td>
<td class="td2">105</td></tr>
</tbody>
</table>
<div id="tabs-9">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Su-Z</td></tr>
<tr> <td class="td1"><a href="hotel231.html">hotel 231</a></td>
<td class="td2">231</td></tr>
...
<tr> <td class="td1"><a href="hotel301.html">hotel 301</a></td>
<td class="td2">301</td></tr>
</tbody>
</table>
</div>
...
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel302.html">hotel 302</a></td>
<td class="td2">302</td></tr>
...
<tr> <td class="td1"><a href="hotel355.html">hotel 355</a></td>
<td class="td2">355</td></tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
[HTML] pobierz, plaintext 

Do tego skrypty:

[JAVASCRIPT] pobierz, plaintext 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
 $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
[JAVASCRIPT] pobierz, plaintext 

plus skrypt do otwierania poszczególnych stron z hotelami:

[JAVASCRIPT] pobierz, plaintext 
<script>
<!--
onload=function(){
  for(i=0;d=document.getElementsByTagName('a')[i++];){
   if (d.href.match(/.*hotel\d+\.html/)){
     d.onclick=function(){window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false}
   }
  }
}
//-->
</script>
[JAVASCRIPT] pobierz, plaintext 

Wszystko ładnie działa, ale podczas sprawdzania, np. w PageSpeed Insights pojawia się ostrzeżenie - "Unikaj zbyt dużego DOM - 1795 elementów".
Ponieważ na stronie startowej wyświetla się tylko tablica "#tabs-1", a pozostałe i tak trzeba później kliknąć żeby je zobaczyć, to tablice od "#tabs-2" do "#tabs-9" nie muszą się ładować od razu. I tu prośba o pomoc.
W jaki najprostszy sposób można zoptymalizować rozmiar DOM? Jak zmusić resztę kodu od #tabs-2" do nie ładowania się przy starcie?
I czy JavaScript rzeczywiście opłacalnie przyspieszy ładowanie i działanie strony? Czy sensowniej jest zostawić kod taki jak jest bez JS?

[trueblue]

#tabs

To ma być selektor CSS określający, który nadrzędny element (nieładowany poprzez Ajax) będzie przechwytywał zdarzenia, a nie wartość atrybutu href.
Czyli ten drugi skrypt w przykładzie.
Tam oprócz sprawdzania tagu, należy dodać sprawdzanie klasy (musisz nadać klasy elementom <a> w tabeli, aby odróżnić je od elementów <a> w zakładkach.

Porównaj swoją procedurę z nową, dokładnie widać gdzie ma być otwieranie okna.

Ten post edytował trueblue 2.10.2021, 08:24:57