Issue Description:
Upon opening a page, the cookie banner appears. Accepting all cookies allows proper functionality. However, accepting only necessary cookies results in lazy loading of images not working. Reloading the page resolves this issue, as does quickly accepting necessary cookies.
Desired Outcome:
The expected behavior is for lazy loading of images to still function even when only necessary cookies are accepted.
Lazy loading is implemented using a Vue.js component. When an image intersects the viewport, a method triggers an event handler that sets a property controlling the display of a loading spinner.
The loadImage() method is responsible for this functionality. It selects the image element, attaches 'load' and 'error' event listeners, sets properties accordingly, and marks the image as intersected.
loadImage() {
const image = this.$el.querySelector('img');
if (image) {
image.addEventListener('load', () => {
this.isLoaded = true;
});
image.addEventListener('error', () => {
this.hasError = true;
});
this.isIntersected = true;
}
}
It appears that the load event handler fails to trigger when only necessary cookies are accepted. Has anyone encountered this issue and found a solution?