Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][JavaScript]Wordpress preloader
Forum PHP.pl > Forum > Przedszkole
atom90
Witam.

Przygotowalem progressbar do wczytywania strony na podstawie znalezionego przykladu:


https://jsfiddle.net/zg650281/38/


Chcialem go zaimplementowac na stronie z wordpressem, ale strona pojawia sie wczesniej niz progress bar, a pasek nie laduje sie.


Moze ma ktos pomysl co robie zle?

Strona:
http://small-atom.pl/

aras785
Cześć,

nie mam za bardzo jak tego przetestować ale myślę, że to pomoże:

w pliku zmień /wp-content/themes/atomix/js/atom.js:


  1. setTimeout(function(){
  2. $('#main-container').fadeOut(300);
  3. }, time);


na

  1. setTimeout(function(){
  2. $('.preloader-wrap').fadeOut(300);
  3. }, time);


daj znać czy działa smile.gif
atom90
No tak, ale sam sobie pomieszalem. To juz do przodu jestesmy, jeszcze kwestia czemu animacja sie nie odpala smile.gif

Edit

Dalem opoznienie seckundowe na ten skrypt wtedy zdazy polapac sie i naliczyc czas, ale zobaczymy czy to bedzie lepiej dzialac (rzeczywiscie gdy strona bedzie ladowala sie dluzej)

Ale prosil bym aby zerknac na to czy to dobre rozwiazanie czy jednak to nie jest dobre

Kod
//Page loader


setTimeout(function(){
    var width = 100,
        perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
        EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
        time = parseInt((EstimatedTime/1000)%60)*100;

    // Loadbar Animation
    $(".loadbar").animate({
      width: width + "%"
    }, time);

    // Loadbar Glow Animation
    $(".glow").animate({
      width: width + "%"
    }, time);

    // Percentage Increment Animation
    var PercentageID = $("#precent"),
            start = 0,
            end = 100,
            durataion = time;
            animateValue(PercentageID, start, end, durataion);

    function animateValue(id, start, end, duration) {

        var range = end - start,
          current = start,
          increment = end > start? 1 : -1,
          stepTime = Math.abs(Math.floor(duration / range)),
          obj = $(id);

        var timer = setInterval(function() {
            current += increment;
            $(obj).text(current + "%");
          //obj.innerHTML = current;
            if (current == end) {
                clearInterval(timer);
            }
        }, stepTime);
    }

    // Fading Out Loadbar on Finised
    setTimeout(function(){
      $('.preloader-wrap').fadeOut(300);
    }, time);
}, 1000);
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.