Мой сценарий предварительной загрузки не работает полностью

Question

Я сделал предварительный загрузчик для загрузки в каком-либо содержимом таблиц и пользовательских полос прокрутки, в то время как загрузка Div покрывает область. После того, как это будет завершено, load div должен исчезнуть.

По какой-то причине предварительная загрузка исчезает до завершения загрузки содержимого.

Если попробовать этот demo и нажмите кнопку на самом верху что говорит место, вы можете заметить, что он полностью не ждать, чтобы все было сконфигурировано до нагрузки Див пропадает. Некоторые люди могут даже увидеть старый контент на секунду или два.

Вот код, который я использовал ниже. Я также включил комментарии.

jQuery(document).delegate(".topCanBeActive", "click", function(e) { 
    e.preventDefault(); 

    // this just handles the css class of buttons 
    jQuery(".topCanBeActive").removeClass("topActive"); 

    // this just handles the css class of buttons 
    jQuery(this).addClass("topActive"); 

    var pageToLoad = ''; 
    switch(this.id) { 
     case 'all_events_button': 
      $('#partypreloader').fadeIn('fast', function() { 
       pageToLoad = 'events.html'; 
       configureEvents(); 
      }); 
      break; 
     case 'all_venues_button': // this is the venues button 
      // fade in 'loading' div 
      $('#partypreloader').fadeIn('fast', function() { 
       pageToLoad = 'venues.html'; 

       // configure tables etc 
       configureVenues(); 
      }); 
      break; 
     case 'event_finder_button': 
      pageToLoad = 'search.html'; 
      break; 
    } 
    if('' !== pageToLoad){ 
     // just in case, I added the same function 
     // to load the preload div here 
     $('#partypreloader').fadeIn('fast', function() { 
      // load the chosen content in desired div 
      $('#whole-ajax-content-one').load(pageToLoad, function() { 
       // fade out the preload div 
       configureFadeOut(); 
      }); 
     }); 
    } 
}); 

Вот функция configureEvents, обратите внимание, что я также использовал фальшивую загрузку, чтобы скрыть проблемы.

function configureEvents() { 
    window.setTimeout(function() { 
     $('#whole-ajax-content-one').load('events.html', function() { 

      // configure table 
      $("#myTable").tablesorter({ 
       headers: { 
        0: { sorter: false } 
       }, 
       widgets: ['zebra'] 
      }); 

      window.setTimeout(function() { 
       // Configure scrollbar 
       $('.scroll-pane').jScrollPane(); 

       // Configure table again - I had issues with this 
       // so I did it twice 
       $("#myTable").tablesorter({ 
        headers: { 
         0: { sorter: false } 
        }, 
        widgets: ['zebra'] 
       }); 

       // Set CSS class for buttons 
       jQuery("#all_events_button").addClass("topActive"); 
       jQuery("#today_button").addClass("timeframeActive"); 
      }, 150); 
     }); 

     // Preload div fades out 
     $("#partypreloader").fadeOut("slow"); 
    }, 200); 
} 

Я пересмотрел код, чтобы сделать предварительную нагрузку до таких уровней, что код такой же сложный, как и он. Если вы заметите что-то, что кажется выключенным, сообщите мне. Спасибо большое всем :)

Answer 1

Это ваш текущий код:

function configureEvents() { 

    window.setTimeout(function() { 

     $('#whole-ajax-content-one').load('events.html', function() { 
      // other code 
     }); 

     $("#partypreloader").fadeOut("slow"); 

    }, 200); 

} 

Как вы можете видеть, fadeOut вызов вне от load() обратного вызова, что означает, что замирания выход происходит сразу - это Безразлично Дождаться события load.

Попробуйте положить его внутриload обратного вызова (в конце):

function configureEvents() { 

    window.setTimeout(function() { 

     $('#whole-ajax-content-one').load('events.html', function() { 
      // other code 

      $("#partypreloader").fadeOut("slow"); 
     });   

    }, 200); 

} 

---

Btw, что тайм-аут для?

Answer 2

Это ваш текущий код? Тогда, может быть, груз в if (сразу после switch) быстрее, чем этот очень сложный configureEvents? Таким образом, сначала запускается configureFadeOut (кстати: зачем вы загружаете одни и те же данные дважды?). Если это так, тогда содержимое загружается, но не настроено так, как мы его видим. А поскольку данные кеширования браузеров, то это происходит только один раз.

Так какой у меня совет? Обновите этот код. Прежде всего, каждая кнопка в меню должна иметь свой собственный контент - уникальный div. Вы загрузите данные в div. Используя jQuery .data, вы установите div на loaded, чтобы каждый другой клик не вызывал ajax (если только не было причин для этого, как очень динамические данные). Затем щелчок между кнопками изменяет только css display (или огонь fadeIn - fadeOut).

Следующее: почему вы используете delegate? Прежде всего это устарело (используйте on), а во-вторых: меняется ли меню во время его жизни? Если это не так, то нет смысла.

И наконец: избавиться от них setTimeouts. Напишите простой код:

show preloader --> on fadeIn callback load data --> 
--> on load callback do some stuff --> 
--> hide preloader 

Это все, что я могу сказать на данный момент. Надеюсь, это поможет. Если это не так, я могу только пожелать вам удачи! :)