[CSS][HTML][JavaScript]Wordpress preloader Opcje

[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:

[HTML] pobierz, plaintext 
setTimeout(function(){
  $('#main-container').fadeOut(300);
}, time);
[HTML] pobierz, plaintext 

na

[HTML] pobierz, plaintext 
setTimeout(function(){
  $('.preloader-wrap').fadeOut(300);
}, time);
[HTML] pobierz, plaintext 

daj znać czy działa (IMG:style_emoticons/default/smile.gif)

[atom90]

No tak, ale sam sobie pomieszalem. To juz do przodu jestesmy, jeszcze kwestia czemu animacja sie nie odpala (IMG:style_emoticons/default/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);