Disponibilidad de JavaScript

No se debe suponer que jаvascript está siempre disponible. Si planeas cargar imágenes de forma diferida, considera ofrecer un marcado <noscript> que muestre las imágenes en caso de que jаvascript no esté disponible. El ejemplo de reserva más simple posible implica usar elementos <noscript> para presentar imágenes si jаvascript está desactivado:

<noscript>: El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su navegador no puede ejecutar jаvascript. Sin embargo no confundir con NoScript (o NoScript Security Suite): NoScript bloquea la ejecución de jаvascript, Java, Flash, Silverlight, y otros complementos y contenidos de scripts. Noscript también es una extensión libre y de código abierto para ciertos navegadores Webs ademas tiene un lista blanca para permitir la ejecución de guiones informáticos de ciertos sitios. Ademas ofrece contramedidas específicas contra los ataques de seguridad.

<!-- Una imagen que eventualmente se vuelve lenta por jаvascript -->
<img class="lazy" src="placeholder-image.webp" data-src="image-to-lazy-load.webp" alt="Soy una imagen">
<!-- Una imagen que se muestra si jаvascript está desactivado -->
<noscript>
  <img src="image-to-lazy-load.webp" alt="Soy una imagen!">
</noscript>

Si jаvascript está desactivado, los usuarios verán ambos: la imagen de marcador de posición y la imagen incluida en los elementos <noscript>. Para evitar esto, coloca una clase no-js en la etiqueta <html>de esta manera:

<html class="no-js">

A continuación, coloca una línea de la secuencia de comandos integrada en <head>, antes de que se soliciten hojas de estilo a través de etiquetas <link>, para eliminar la clase no-js del elemento <html> si jаvascript está activado:

<script>document.documentElement.classList.remove("no-js");</script>

Por último, puedes utilizar cierta CSS para ocultar los elementos con una clase diferida cuando jаvascript no está disponible de esta manera:

.no-js .lazy {
  display: none;
}

Esto no evita que las imágenes de marcador de posición se carguen, sino que ofrece un resultado más conveniente. Los usuarios con jаvascript desactivado obtienen algo más que imágenes de marcador de posición, lo que es mejor que obtener marcadores de posición sin contenido de imagen con ningún significado.

Curso Básico De jаvascript

Curso intensivo para principiantes en HTML5

Artículos Relacionados

Comentarios