Aplazar la carga de imágenes y clases CSS & estilos mediante JavaScript-Safe-defer. js
| Autor: | philip-badilla |
|---|---|
| Views Total: | 568 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 2, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Safe-defer. js es una biblioteca de carga diferida de JavaScript amigable con SEO que tiene la capacidad de aplazar la de carga de imágenes, clases CSS y estilos CSS en línea para mejorar el tiempo de carga de la página.
Funcionamiento
Enlace a Safe-defer. js.
<script src="/src/safe-defer.js"></script>
Inicializa la librería y estamos listos para irnos.
(function() {
safeDefer.deferAll();
})(); Aplazar la carga de imágenes utilizando el atributo Data-Safe-aplazar-src :
<img src="1.jpg" data-safe-defer-src/>
Aplazar la carga de clases CSS utilizando el atributo Data-Safe-aplazar-Class :
<div class="wallpaper stall" data-safe-defer-class="stall"></div>
Aplazar la carga de estilos en línea mediante el atributo Data-Safe-aplazar-Style:
<div class="wallpaper" style="background-image: url('bg.jpg')" data-safe-defer-style>
</div> Todas las opciones posibles.
// default attributes srcDeferAttribute: "data-safe-defer-src", styleDeferAttribute: "data-safe-defer-style", classDeferAttribute: "data-safe-defer-class", srcBackingAttribute: "data-safe-deferred-src", // image placeholder imagePlaceholder: "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", // debug mode debugMode: false
