This script loads background images upon scrolling to them. I'm interested in having the images loaded after the full document is ready instead, but I'm not sure how i'd modify this script to achieve that.
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>
If you need a simple script that removes the CSS class .hiddenbackground from all elements that have it as soon as the page loads, you can use something like this:
document.addEventListener('load', () => {
document.querySelectorAll('.hiddenbackground').forEach(el => {
el.classList.remove('hiddenbackground');
});
});
Aside notes
However, instead of removing_the class as soon as the page loads via JavaScript, why do you ship it in the first place? Instead of using JS to remove a class from the DOM, you might (probably) remove it from your HTML entirely before it is delivered to a user.
Alternative "solution"
Instead of modifying the JS side of things, how about simply deleting the CSS definition for .hiddenbackground?
.hiddenbackground {
/* background-image: none !important; */
}
Or just delete it entirely.