While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible.
I experimented with rearranging the order in which my JavaScript and CSS files were called, but unfortunately, I did not have any success in resolving the problem.
- Below is the CSS code without lazy loading, illustrating the desired background position:
.right-image{
background: url("https://images.unsplash.com/photo-1511910849309-0dffb8785146?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60");
}
- This next snippet of code shows the CSS with lazy loading implemented - note how the background position shifts upon full loading:
.right-image
{
background: url("https://placekitten.com/g/500/500");
}
.right-image.visible {
background: url("https://images.unsplash.com/photo-1511910849309-0dffb8785146?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60");
}
Although I have referenced the jsfiddle for further clarity, please be aware that I was unable to make the lazy loader work on this specific website, even though it functions correctly when tested locally.
My expectation is for the background image to remain in its original position regardless of whether the lazy loader is utilized. Any advice or assistance on this matter would be greatly appreciated.
Thank you