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

问题描述

问 题

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

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

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

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

解决方案

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

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

这篇关于javascript - 现在写一个效果遇到一个难题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！