• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Preload strony za pomocą jQuery oraz particle.js

VPS Starter Arubacloud
0 głosów
224 wizyt
pytanie zadane 24 maja 2016 w JavaScript przez niezalogowany
zamknięte 24 maja 2016

EDIT #2: Rozwiązane. Wystarczyło zamienić .content{display:none} na .content{visibility:hidden} oraz w JS dodać $('.content').css('visibility', 'visible'); http://codepen.io/anon/pen/KMPPQB 

 

Bry. Zanim załaduje się strona to mam funkcję z preload'erem

<body>
<div class="preload sk-cube-grid">
  <div class="sk-cube"></div>
</div>

<div class="content">
<!-- content całej strony -->

<script jquery></script>
<script app.js></script>
</body>
JS
$(function() {
        $(window).load(function(){
            $(".preload").fadeOut(300, function() {
                $(".content").fadeIn(300);
                
            });
        });
    });
particlesJS('particles-js', ...
CSS
.content{display:none;}
.preload { 
    width:100px;
    height: 100px;
    position: fixed;
    top: calc(40% - 40px);
    left: calc(50% - 40px);
}

I teraz problem jest taki, że przez 

.content{display:none;}

particle.js nie może się załadować. Probowałem w funkcji preload'owej dać
 

#1. $('.content').css('display', 'block');

#2. //Przed funkcją
$(.'content').addClass('displayNone');
//w funkcji
$(.'content').removeClass('displayNone');

#3. $(.'content').show();

#4. jQuery odpowiednio ładowane w <head> oraz nad </body>

#5. zamiana miejscami inicjalizacje particle.js z funkcja preload'ujaca

Póki co bez skutku. Any ideas?

EDIT: http://codepen.io/anon/pen/GZVwLz
Powyżej, poza divem .content, particle.js działa normalnie. Kiedy div z particle.js jest w środku .content, nic się nie pojawia z particle.js, a strona jest normalnie załadowana

komentarz zamknięcia: Rozwiązane.

1 odpowiedź

0 głosów
odpowiedź 24 maja 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Po pierwse na jakiego grzyba nakładasz display, jeżeli praktycznie jest cały czas widoczny efekt i jak w szablonie. Wystarczy tylko na klasę .lorem, więc go o drobinę go zmodyfikowałem.

Po pierwsze wyrzuciłem z content display.

Przerzuciłem je do klasy Lorem.

Zmodyfikowałem odrobinę kod

    $(function() {
            $(".preload").fadeOut(1000, function() {
                $(".lorem").fadeIn(1000);
            });
    });
 });

Pytanie tylko, czy te poruszane kreski mają być widoczne podczas preloada czy nie?

 

 

komentarz 24 maja 2016 przez niezalogowany
Nie mają być widoczne. .lorem to jeden div z wielu, dlatego całą stronę odziałem w .content i dlatego preload działa na .content a nie na poszczególnym divie.

Ogólnie #particle-js jest w .content, więc dlatego robię preload na .content, aby wszystkie skrypty/grafiki mogły się pierw załadować
komentarz 24 maja 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
Czy te kwadraciki i te particle to są dwie osobne funkcje?
komentarz 24 maja 2016 przez niezalogowany
Kwadraciki to jest CSS x)
Particle to osobna funkcja

Podobne pytania

0 głosów
2 odpowiedzi 371 wizyt
0 głosów
1 odpowiedź 164 wizyt
pytanie zadane 17 sierpnia 2016 w JavaScript przez Dexxter Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 109 wizyt
pytanie zadane 22 maja 2020 w JavaScript przez Allen Obywatel (1,010 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...