• 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
60 wizyt
pytanie zadane 24 maja 2016 w JavaScript, jQuery, AJAX przez użytkownika Nehel Mądrala (7,280 punkty)
zamknięte 24 maja 2016 przez użytkownika 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 użytkownika ShiroUmizake Pasjonat (17,970 punkty)

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

Podobne pytania

0 głosów
1 odpowiedź 49 wizyt
pytanie zadane 17 sierpnia 2016 w JavaScript, jQuery, AJAX przez użytkownika Dexxter Nowicjusz (120 punkty)
0 głosów
4 odpowiedzi 98 wizyt
pytanie zadane 11 stycznia w JavaScript, jQuery, AJAX przez użytkownika Kamila Użytkownik (570 punkty)
0 głosów
1 odpowiedź 87 wizyt
pytanie zadane 1 sierpnia 2016 w JavaScript, jQuery, AJAX przez użytkownika Barttyyy Gaduła (4,750 punkty)
...