现在写一个效果遇到一个难题

Question

手头上一个项目的效果要求是这样的:

1.一块全屏的图片区域
<div class = "module" style = "background:url();"></div>
里面有一个背景图片。

2..module里头有三个小块
    <div class = "tab" trueImg = "xxxxx.jpg"></div>
小块里面有一个自定义的属性trueImg。

现在要实现的效果是：当我鼠标放在任何一个class为tab的小块上时，获取当
前小块的trueImg的图片地址并且放在module的url里，实现动态改变背景图，
但是由于图片很大会出现一个问题就是切换背景图时有时会出现一闪的白底的
瞬间，再显示图片，这样体验很差。于是我想用懒加载lazyLoad,但是懒加载
只有默认的第一次显示有效果，后面不管你怎么改变地址都没效果，所以在这
里向各位请教高招，怎么实现缓慢加载出背景图片，避免出现白色的一闪。

Answer 1

其实就是你在把鼠标放在tab块上是，先不要急着去改变module的background。等到加载完之后再更换路径。

var img = new Image();
img.src = trueImg;
img.onload = function() {
    $(".module").css("background", "url(" + trueImg + ")")
}

Answer 2

功能你已经写出来了，问题出现在过渡上。
那把过渡处理一下就好了。
你可以试试这样
`
<div class="wrapper">
<!-- 这两个bg块也可以用:before和:after来做，文档代码看起来会更漂亮些 -->
<div class="bg-1"></div>
<div class="bg-2"></div>

<div class="tab" data-img-src="xxx.jpg"></div>
<div class="tab" data-img-src="xxx.jpg"></div>
<div class="tab" data-img-src="xxx.jpg"></div>
</div>
`
背景设置在那两个 bg 上，在 img.onload 里做两个元素交替的处理