Preloader with JavaScript

Question

I have faced such a problem. I need to make a preloader with a percentage for a page but I don't know how. Actually, I don't need animation or simple preloader. What do I can and what do I have?

window.onload = function() { var images = document.images, imagesTotalCount = images.length, imagesLoadedCount = 0, preloader = document.getElementById('js_preloader'), percDisplay = document.getElementById('js_preload__percentage'); for(var i = 0; i < imagesTotalCount; i++) { image_clone = new Image(); image_clone.onload = image_loaded; image_clone.onerror = image_loaded; image_clone.src = images[i].src; } function image_loaded() { imagesTotalCount++; percDisplay.innerHTML = (((100 / imagesTotalCount) * imagesLoadedCount) << 0) + '%'; if(imagesLoadedCount >= imagesTotalCount) { setTimeout(function() { if(!preloader.classList.contains('done')) { preloader.classList.add('done'); } }, 1500); } }

};

This aproach allows to see all images to be downloaded and and calculate percentage. But how do I can also take in count the download of css and js files?

Bsalex · Accepted Answer · 2017-12-19 00:40:22Z

1

You could use the same approach, but with document.scripts and document.styleSheets collections.

answered Dec 19, 2017 at 0:40

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zakharov.arthur Over a year ago

Thank you very much, but can you advise about the exect code. I mean style_clone = new Style(); script_clone = new Script (); Or it shall be done via new Document ()? Also what should I refer to src or href? Sorry for may be obvious question but I am quite new to the sphere. Thank for patience )

Collectives™ on Stack Overflow

Preloader with JavaScript

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related