如何使用vanilla-lazyload为懒加载背景图添加CSS背景样式？

原有背景图代码包含完整的背景样式：

<section class="ptb-100 gradient-overly-bottom" style="background: url('assets/img/hero-2.jpg')no-repeat center center / cover fixed">

使用vanilla-lazyload后，仅保留data-bg属性：

<section class="ptb-100 gradient-overly-bottom lazy" data-bg="assets/img/hero-2.jpg">

但插件加载完成后只生成background-image属性，丢失了no-repeat、center center、cover、fixed这些关键样式，以下是三种解决方法：

方法一：用CSS类统一设置背景样式 #

把重复的背景样式抽成CSS类，直接绑定到元素上：

.bg-default {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

修改HTML元素，添加这个类：

<section class="ptb-100 gradient-overly-bottom lazy bg-default" data-bg="assets/img/hero-2.jpg">

插件生成的background-image会和CSS类里的样式自动合并，还原原有效果。

方法二：利用加载回调手动设置完整样式 #

初始化vanilla-lazyload时，配置callback_loaded回调，在元素加载完成后覆盖默认的背景样式：

const lazyLoad = new LazyLoad({
  elements_selector: '.lazy',
  callback_loaded: (element) => {
    const bgUrl = element.getAttribute('data-bg');
    element.style.background = `url('${bgUrl}') no-repeat center center / cover fixed`;
  }
});

方法三：自定义data属性存储完整样式（适合差异化场景） #

如果不同元素的背景样式不一样，可以用自定义data属性存完整的background值：

<section class="ptb-100 gradient-overly-bottom lazy" data-full-bg="url('assets/img/hero-2.jpg') no-repeat center center / cover fixed">

然后在回调中读取并设置：

const lazyLoad = new LazyLoad({
  elements_selector: '.lazy',
  callback_loaded: (element) => {
    const fullBgStyle = element.getAttribute('data-full-bg');
    if (fullBgStyle) {
      element.style.background = fullBgStyle;
    }
  }
});

内容的提问来源于stack exchange，提问作者Khurram