运行时动态设置div的GIF背景图失效，求解决方案

问题描述 #

我有一个存放大量GIF的asset文件夹，希望在运行时根据天气描述为weather类的div设置对应的GIF背景图。尝试了CSS和JS结合的方式，但动态设置的GIF并未加载，仅显示白色背景；硬编码CSS的background-image则能正常显示，且控制台无404错误。

现有代码 #

CSS代码

.weather{
    width: 300px;
    border-radius: 6px;
    box-shadow: 10px -2px 20px 2px rgb(0 0 0 / 30%);
    color: #000;
    background-color: #fff;
    margin: 20px auto 0 auto;
    padding: 0 20px 20px 20px;
    background-image: none;
}

JS及组件代码

function getCurrentWeatherGIF (description) {
    let gifInfo = []
    let gif
    let fontColor

    switch(description){
        case "clear sky":
            gif = "url(../../assets/gifs/sunny.gif)"
            fontColor = "#000"
            break

        case "light rain":
        case "moderate rain":
            gif = "url(../../assets/gifs/rain.gif)"
            fontColor = "#fff"
            break

        case "few clouds":
        case "overcast clouds":
        case "scattered clouds":
            gif = "url(../../assets/gifs/cloudy.gif)"
            fontColor = "#000"
            break

        default:
            gif = "url(../../assets/gifs/unknown.gif)"
            fontColor = "#000"
            break
        }

        gifInfo = [gif, fontColor]
        return gifInfo
    };

<div className = "weather" onLoad = {() => {
                let gifInfo = getCurrentWeatherGIF(data.weather[0].description)
                document.getElementsByClassName("weather")[0].style.backgroundImage = gifInfo[0]
                document.getElementsByClassName("weather")[0].style.color = gifInfo[1]
        }}>
</div>

问题根源 #

div元素没有onLoad事件：该事件仅适用于<img>、<script>、<iframe>等元素以及window对象，绑定在div上的onLoad不会触发，导致动态设置背景的代码从未执行。

解决方案 #

方案1：React函数组件用useEffect（推荐） #

利用useEffect钩子在组件挂载或data更新时执行背景设置逻辑：

import { useEffect } from 'react';

function WeatherComponent({ data }) {
  useEffect(() => {
    if (!data?.weather?.[0]?.description) return;
    const gifInfo = getCurrentWeatherGIF(data.weather[0].description);
    const weatherDiv = document.querySelector('.weather');
    if (weatherDiv) {
      weatherDiv.style.backgroundImage = gifInfo[0];
      weatherDiv.style.color = gifInfo[1];
    }
  }, [data]); // 依赖data，数据更新时重新执行

  return <div className="weather"></div>;
}

方案2：CSS类切换（更符合React风格） #

定义不同天气对应的CSS类，通过JS动态切换className，避免直接操作DOM样式：

补充CSS代码

.weather.sunny {
  background-image: url(../../assets/gifs/sunny.gif);
  color: #000;
}
.weather.rainy {
  background-image: url(../../assets/gifs/rain.gif);
  color: #fff;
}
.weather.cloudy {
  background-image: url(../../assets/gifs/cloudy.gif);
  color: #000;
}
.weather.unknown {
  background-image: url(../../assets/gifs/unknown.gif);
  color: #000;
}

修改JS函数及组件

function getWeatherClass(description) {
  switch(description){
    case "clear sky":
      return "sunny";
    case "light rain":
    case "moderate rain":
      return "rainy";
    case "few clouds":
    case "overcast clouds":
    case "scattered clouds":
      return "cloudy";
    default:
      return "unknown";
  }
}

<div className={`weather ${getWeatherClass(data?.weather?.[0]?.description || 'unknown')}`}></div>

方案3：绑定到window.onload（非React场景适用） #

如果不是React项目，可将逻辑绑定到window的load事件，确保页面完全加载后执行：

window.onload = function() {
  if (!data?.weather?.[0]?.description) return;
  const gifInfo = getCurrentWeatherGIF(data.weather[0].description);
  const weatherDiv = document.querySelector('.weather');
  if (weatherDiv) {
    weatherDiv.style.backgroundImage = gifInfo[0];
    weatherDiv.style.color = gifInfo[1];
  }
};

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