js(jquery)加载图片(GIF)闪烁的问题

js(jquery)加载图片(GIF)闪烁的问题

使用new Image()进行图片预加载，代码如下：

function setImage(img,$el,method){
    
    
    if(method == "div"){
    
    
        $el.css("background-image","url(" + img.src +")");
    }else if(method == "img"){
    
    
        $el.css({
    
    
            "content": "url("+img.src+")"
        })
    }
}
function loadImage(url,$el,method,callback) {
    
    
    var img = new Image(); //创建一个Image对象，实现图片的预下载
    img.onload = function(){
    
    
        img.onload = null;
        callback(img,$el,method);
    };
    img.src = url;
}

使用方法：

1. 如果是使用div背景图片时，调用方式：

let url = "";
let $el = $("选择器");
loadImage(url + "?" + new Date().getTime(),$el,"div",setImage);

2. 如果是使用img标签时，调用方式：

let url = "";
let $el = $("选择器");
loadImage(url + "?" + new Date().getTime(),$el,"img",setImage);

加载GIF动态图时，会出现重复的问题，可以计算出动态图结束时间，用一张最后的静态图替换

//动态图路径
let url1 = "";
//一次动画用时
let timer = "";
//静态图路径
let url2 = "";
let $el = $("选择器");
loadImage(url1 + "?" + new Date().getTime(),$el,"div",setImage);
setTimeout(()=>{
    
    
    loadImage(url2 + "?" + new Date().getTime(),$el,"div",setImage);
},timer);