准备好文档还是在一定时间后运行？

Question

i have preloader , which hides after document.ready .

angular.element(document).ready(function () {
    var el =  document.getElementById('preloader');
    fadeOut(el);
});

Sometimes document loads so slowly , because of 1 or 2 big size photos , so i don't need to wait for this photos and need to hide preloader after 5000ms.

How can i do that ? Thanks in advance .

Answer 1

That "document ready" process you're using is simply wrapping jQuery's (now deprecated) .ready() method. It does not wait for all images to load, it only waits for the DOM to be parsed. The window.onload event is the event that only fires after all images have loaded.

Instead, Angular has a directive called ng-cloak to prevent a "flash of unstyled content" (FOUC). The cloak works by putting a class on a top level element, which you can then style to hide part, or all, of the page while you wait for a "ready" state. You can use CSS transitions, rather than the jQuery .fadeOut() effect, to do a slow fade out on your preloader once the cloak is removed.