PreloaderQ is a javascript plugin that be used to track the flow of asynchronous/ synchronous tasks, mainly designed to show/hide loading gif on websites running multiple ajax requests
from npm
npm install preloaderq --save
const PreloaderQ = require('preloaderq')
const preloader = new PreloaderQ(initialQueue)
in browser
var preloader = new PreloaderQ(initialQueue)
initialize
var preloader = new PreloaderQ()
with initial array of tasks
var preloader = new PreloaderQ(['load page'])
setup callbacks
preloader.setEmptyCallback(function(id){
console.log('queue is empty; removed ',id)
})
preloader.setFirstTaskCallback(function(id){
console.log('started first task',id)
})
preloader.setEnqueueCallback(function(id){
console.log('enqueued',id)
})
preloader.setDequeueCallback(function(id){
console.log('dequeued',id)
})
enqueue and dequeue tasks
var preloader = new PreloaderQ(['load page'])
//setup callbacks
...
preloader.enqueueTask('load student details')
loadStudentDetailsAsync(function(data){
preloader.dequeueTask('load student details')
//do stuff
})
A website needs to show a loading gif image whenever something is executing in background (ajax request maybe). If there are multiple ajax requests running in parallel, we need to track the starting of first ajax call and ending of all calls in order to show and hide the loading bar
var preloader = new PreloaderQ()
preloader.setEmptyCallback(function(){
//no active tasks
$('#loader').hide()
})
preloader.enqueueTask('load page')
preloader.setFirstTaskCallback(function(){
//started first task
$('#loader').show()
})
$(document).ready(function() {
preloader.dequeueTask('load page')
})
preloader.enqueueTask('load student details')
loadStudentDetailsAsync(function(data){
preloader.dequeueTask('load student details')
//do stuff
})