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?

[Blasius]

Wymęczyłem (czytaj - znalazłem i trochę zmieniłem) takie dwa skrypty:

[JAVASCRIPT] pobierz, plaintext 
<script>
function onclick(event) {
if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
}
 
event.preventDefault();
const url = event.target.href;
console.log('Fetching results at ' + url);
 
}
const pagination = document.querySelector('a');
pagination.addEventListener('click', onclick);
 
</script>
<script>
var myHTML = document.querySelector('html');
myHTML.onclick = 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=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
}
}
}
</script>
[JAVASCRIPT] pobierz, plaintext 

W "ajax/content1.php do "ajax/content8.php
zostawiłem kod:

[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=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
}
}
}
//-->
</script>
[JAVASCRIPT] pobierz, plaintext 

Działa jak chcę żeby działał.
Tylko dlaczego po naciśnięciu kolejnego tab/li cała tabela obniża się o około 40px (oczywiście tylko jej legenda zostaje na miejscu, a obniża się lista hoteli) skoro nic w *css nie zmieniałem?

[HTML] pobierz, plaintext 
<div id="tabs">
<ul>
<li><a class="hotel" href="#tabs-1" >Al-Aq</a></li>
<li><a class="hotel" href="ajax/content1.php" >Aq-D</a></li>
<li><a class="hotel" href="ajax/content2.php" >E-Ha</a></li> itd...
[HTML] pobierz, plaintext 

Jest jakiś sposób aby to poprawić? Pewnie właśnie w css?


P.S. Wskazówkę dałeś, chociaż nie udało mi się chyba pójść Twoim torem myślenia... Ale - DZIĘKI (IMG:style_emoticons/default/exclamation.gif) !

Ten post edytował Blasius 12.10.2021, 19:08:50