Instalar un loader mientras se carga una página.

He encontrado gracias a este jsfiddle
https://jsfiddle.net/colas/923xb0tm/1/
Pero, ¿cómo hacerlo para que comience antes de que la página aparezca unos milisegundos?
¡Gracias! ;)

Decididamente... está bien... era un problema con Dreamweaver.
Pero, ¿cómo reducir la duración de la carga?
Aquí están mis scripts:

<script> $(window).load(function(){ $(".loader").fadeOut("1000"); }) </script> <script> $('.button-class').click(function (){ var btn = $(this); $(btn).buttonLoader('start'); setTimeout(function (){ $(btn).buttonLoader('stop'); }, 5000); }); </script>

Gracias,
LM

Hola,
¿qué llamas un loader?
Si hablas de una barra de progreso que muestra el tiempo de carga, es cierto que hay que pasar por la programación.
_la función loader en JQuery (que es una biblioteca de JavaScript) no sirve para eso, sino para cargar contenido.
https://api.jquery.com/load/

_tu código es incorrecto y debería mostrar un error en la consola.
De hecho, no cierras ni la llave de la función anónima ni el paréntesis del método ".load", que sirve para cargar contenido y no para otra cosa.

_Para mostrar el progreso de la carga de un elemento, es necesario obtener su peso total en bytes, así como el peso en bytes ya cargado. El resto es bastante simple a partir de ahí; si quieres un porcentaje, haces una regla de tres y lo muestras después por el DOM (representación virtual de la página incluida en JavaScript que permite acceder a los elementos de la página, por ejemplo, para quitar/agregar/modificar un elemento como su contenido).
Si deseas hacerlo en varios elementos, deberás hacerlo en función.
También puedes mirar hacia los eventos como "onLoad" (que significa "al cargar") que permite saber el estado de la carga (no empezada, en curso, cargada).
_Con JQuery, en el uso básico, comienzas por verificar que la página está cargada (efectivamente, dado que JavaScript funciona en la página misma; si la página no está cargada, no hay JavaScript) y luego incluyes tus instrucciones en el espacio de esta función.
Sin embargo, tú no lo haces.
Aquí está cómo debe hacerse:

https://learn.jquery.com/using-jquery-core/document-ready/

_Antes de utilizar JQuery, debes conocer y saber usar JavaScript, ya que JQuery no es más que una utilización de JavaScript (una biblioteca de software = un archivo de funciones y objetos de JavaScript) que a veces es lamentable si es solo para una función, pero bueno, ese no es el tema.

_Para aprender, hay una sola solución: arremangarse y trabajar.
Buen trabajo entonces.

Ten cuidado también, la etiqueta H1 en HTML indica el título de la página, que sirve para referenciar e indexar el contenido de tus páginas. Por lo tanto, claramente no es una buena idea usarla de otra manera, especialmente considerando que en HTML no faltan etiquetas para texto.

Cuando tengas las nociones básicas en JavaScript y programación, puedes dirigirte a cursos y ejemplos sobre el tema (barra de carga y no loader, que quiere decir cargar un archivo, una imagen, un texto o lo que sea, pero consiste en cargar contenido y no observar su progreso para poder mostrar un %, círculo o lo que queramos que represente el progreso de carga) como este que presenta una versión con JQuery que se asemeja bastante a lo que intentaste (menos los errores):

https://eticweb.info/tutoriels-javascript/afficher-une-barre-de-chargement-avant-que-la-page-entiere-ne-soit-chargee/

pd: serán sobre todo los archivos multimedia (imágenes, sonidos, videos) los que tardarán en cargar, por lo que debes concentrarte en estos archivos si tu página tarda en cargar. Por supuesto, reducir el tamaño de las imágenes u otros elementos es indispensable en la web, donde la mayoría de los usuarios utilizan un móvil para consultar páginas (así que olvida las imágenes de alta calidad y gran tamaño, eso no servirá de nada en más de la mitad de los casos y solo retrasará la carga de tu página, lo que puede incitar al usuario a simplemente ir a otro sitio porque tarda demasiado y, en todo caso, hará que su navegación sea desagradable y no lo incentivará a quedarse en tu sitio para esperar, con la barra de carga mostrada o no).

Merci DoctorHow,
Usted es demasiado preciso para mí, que soy malísimo en JS y en programación. Pero gracias de nuevo por responderme.^^
Actualmente, mi cargador funciona en Firefox/Safari/Chrome... pero solo en local.
En línea, la div "opaca" y el cargador permanecen visibles.
¿Tendría alguna explicación?
Gracias nuevamente,
LM

.custom-loading-spinner { cursor: progress; position: absolute; width: 100%; height: 100%; } .custom-loading-spinner::before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 10001; overflow: hidden; background: white; opacity: 0.6; } .custom-loading-spinner::after { box-sizing: border-box; z-index: 10002; content: ""; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: cf-loading 1s linear infinite; } @keyframes cf-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(window).load(function(){ $(".loader").fadeOut("1000"); }) </script> <script> $('.button-class').click(function (){ var btn = $(this); $(btn).buttonLoader('start'); setTimeout(function (){ $(btn).buttonLoader('stop'); }, 5000); }); </script>