Loader

Assets Loader

When you have a website that depend on many library usually it would take long time to loading important assets for new user, and immediately they will start thinking "What is this website doing now?".

That's why you need to design your own loading overlay for your site, and this feature will tell you how much assets left or downloaded so you can make a progress bar.

Loading CSS

sf.loader.css accept array of string of the assets URL.

sf.loader.css([
   'css/animate.min.css'
]);

Loading JS

sf.loader.js accept array of string of the assets URL.

sf.loader.js([
   'app/component.js',
   'app/router.js',
]);

Loading images

When you're using either sf.loader.css or sf.loader.js the loader feature will be activated and the framework will automatically scan all <img> element on current page. If you want to preload your other located on CSS you will need to put <img> element on the HTML body.

Tracking progress

Sometime the assets was cached by the browser and it will immediately become a loaded content.

sf.loader.onProgress(function(loadedLength, totalLength){
   console.log(loadedLength+ ' of ' +totalLength+ ' was loaded');
});

After the loading completed, this function will be triggered before all of $(function(){}) being called.

sf.loader.onFinish(function(){
   console.log("All content was loaded from internet or cache");
});