Question

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

我尝试重新排列我的js和css文件的调用位置，但是没有运气。

这是没有的延迟加载，并且我想要的背景位置为：

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

这是延迟加载，但请注意，它链接到同一张图片，但是完全加载后背景位置会发生变化：

.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

我发现了我的错误。我没有将background-position应用于我的right-image.visible CSS。谢谢

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

1 个答案: