javascript - 为什么延迟加载会重新定位背景图片？

Question

我正在我的网站上实现延迟加载，但由于某种原因，当图像完全加载并可见时，图像位置会发生变化。

我曾尝试重新安排我的 js 和 css 文件的调用位置，但没有成功。

https://jsfiddle.net/f3q01ha5/3/

1. 这是没有延迟加载的，我希望背景位置是:

.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");
}

1. 这是 延迟加载，但请注意它链接到相同的图像，但在完全加载时背景位置会发生变化:

.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");
}

我附上了 jsfiddle，但请注意我无法让延迟加载在这个网站上运行，但在本地运行良好。

无论我是否使用惰性加载器，我都希望背景图像加载到同一位置。任何指导都意义重大。

谢谢

Answer 1

我发现了我的错误。我没有将背景位置应用于我的 right-image.visible CSS。谢谢