Preload strony za pomocą jQuery oraz particle.js

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ź

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ć