Este script carga imágenes de fondo al desplazarse hasta ellas. Estoy interesado en cargar las imágenes después de que el documento completo esté listo, pero no estoy seguro de cómo modificaría este script para lograrlo.
CSS
.hiddenbackground { background-image: none !important; }js
<script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var lazyBackgrounds = [].slice.call(document.querySelectorAll(".hiddenbackground")); if ("IntersectionObserver" in window) { let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { entry.target.classList.remove("hiddenbackground"); lazyBackgroundObserver.unobserve(entry.target); } }); }); lazyBackgrounds.forEach(function(lazyBackground) { lazyBackgroundObserver.observe(lazyBackground); }); } }); </script>Si necesita un script simple que elimine la clase CSS .hiddenbackground de todos los elementos que la tienen tan pronto como se carga la página, puede usar algo como esto:
document.addEventListener('load', () => { document.querySelectorAll('.hiddenbackground').forEach(el => { el.classList.remove('hiddenbackground'); }); }); Notas aparte
Sin embargo, en lugar de eliminar_la clase tan pronto como la página se carga a través de JavaScript, ¿por qué la envía en primer lugar? En lugar de usar JS para eliminar una clase del DOM , podría (probablemente) eliminarla por completo de su HTML antes de que se entregue a un usuario.
"Solución" alternativa En lugar de modificar el lado JS de las cosas, ¿qué tal simplemente eliminar la definición CSS para .hiddenbackground ?
.hiddenbackground { /* background-image: none !important; */ }O simplemente eliminarlo por completo.