• 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

0 głosów
72 wizyt
pytanie zadane 24 maja 2016 w JavaScript, jQuery, AJAX przez Nehel Mądrala (7,280 p.)
zamknięte 24 maja 2016 przez Nehel

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 Pasjonat (24,920 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 Nehel Mądrala (7,280 p.)
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 Pasjonat (24,920 p.)
Czy te kwadraciki i te particle to są dwie osobne funkcje?
komentarz 24 maja 2016 przez Nehel Mądrala (7,280 p.)
Kwadraciki to jest CSS x)
Particle to osobna funkcja

Podobne pytania

0 głosów
1 odpowiedź 50 wizyt
0 głosów
4 odpowiedzi 110 wizyt
pytanie zadane 11 stycznia w JavaScript, jQuery, AJAX przez Kamila Użytkownik (570 p.)
0 głosów
1 odpowiedź 97 wizyt
pytanie zadane 1 sierpnia 2016 w JavaScript, jQuery, AJAX przez Barttyyy Gaduła (4,750 p.)
...