Diskuze: Loading kolečko blokuje načtení záložky

Tomáš Dvořák

Člen

Tomáš Dvořák:13.9.2017 22:24

Ahoj,

mám odkaz, který generuje nějaký přehled objednávek v HTML, např:

http://www.shop.xy/prehled_objednavek.php#konec

s tím, že tam mám kotvu, abych se dostal na konec tabulky, kde poslední řádek má:

<tr id="konec">....</tr>

Při načítání bez kódu níže se načte stránka a hodí mě k tomuto ID, tedy na "konec".

Problém nastává, když jsem použil tento kód, abych zobrazil načítání kolečka dokud se nenačte stránka.

<style>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:0px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom: 0px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
}
</style>

<body onload="myFunction()">
        <div id="loader"></div>
        <div style="display:none;" id="myDiv" class="animate-bottom">
                obsah ---- tabulka ----- atd
<script>
                var myVar;

                function myFunction() {
                    myVar = setTimeout(showPage, 100);
                }

                function showPage() {
                  document.getElementById("loader").style.display = "none";
                  document.getElementById("myDiv").style.display = "block";
                }
            </script>
        </div>
    </body>
</html>

Proč to tento script blokuje? Pokud umístím odkaz na tuto stránku

<a href="#konec">konec</a>

tak všechno funguje.

Zdroj načítacího kolečka jsem použil z https://www.w3schools.com/…s_loader.asp

Kde hledat chybu?

Díky za pomoc

Odpovědět

13.9.2017 22:24

Robert Poč

Člen

Robert Poč:14.9.2017 14:26

Ten odkaz/kotva funguje, ale vzheldem k tomu, že myDiv má v okamžiku zavolání kotvy výšku 0px, postaví se prohlížeč na začátek. Teprve následně se zobrazí obsah, který se ale již odroluje.

Zkus v těle showPage() odrolovat na #kotva

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

14.9.2017 14:26

Tomáš Dvořák

Člen

Tomáš Dvořák:14.9.2017 20:45

Tomuto jsem se nejprve bránil, ale dává smyl, že to tam vyruší.

Kdyby to někdo řešil, tak jsem tam udělal toto, doufám, že je to v rámci JS v pořádku

var type = window.location.hash.substr(1);
location.href = "#" + type;

Nahoru Odpovědět

14.9.2017 20:45

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.9.2017 20:51

Proc osekavas z toho stringu prvni znak, kdyz ten samej znak k nemu pak zase prilepis?
Pokud se nepletu, muzes proste udelat:

location.href = window.location.hash

Nahoru Odpovědět

14.9.2017 20:51

Neaktivní uživatelský účet

Tomáš Dvořák

Člen

Tomáš Dvořák:14.9.2017 20:53

Ano, jsem trotl. Jak jednoduché.

Děkuji

Editováno 14.9.2017 20:53

Nahoru Odpovědět

14.9.2017 20:53

Tomáš Dvořák

Člen

Tomáš Dvořák:14.9.2017 21:41

Jen doplním, že v případě, že je odkaz bez hashtagu, tak se to zacyklí, upravil jsem to takto:

var hash = window.location.hash;
if (hash){
        location.href = hash;
}

Je to takto ok?

Nahoru Odpovědět

14.9.2017 21:41

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.