web 图片切换闪屏

我们直接进入高潮吧。

// update images
Element.addEventListener('click',function(e){
    if(_var){
        Element.scr = url_1
    }else{
         Element.scr = url_2
    }
})

我们发现直接修改src的项目，到了线上会发现，这NM会闪屏，SRC每次都加载，那就不用src吧。直接写到元素文档流里面试试。

let mmp = (a,b)=>{
    a.style.display = 'bock'
    b.style.display = 'none'
}
mmp(Element1,Element2)

看着代码貌似是解决了一样，试一下，mmp怎么不可以哇。我们来猜测下，是display的原因？来看下w3是怎么定义的：

some values (such as none or contents ) cause the element 
and/or its descendants to not generate any boxes at all   --wc.org

中文的意思是：display的值为‘none’或‘contents’，会导致设置的那个元素以及后代元素不会生成box盒子。

那么一次性加载并且不重新加载就可以解决问题了。

首先css不能设置display：none，只能隐藏，推荐一个方案，opacity和height设置0。

css

    opacity: 0;
    height: 0;

js

let ele_h = (a)=>{
    a.style.opacity = 0
    a.style.height = 0
}
let ele_s = (a)=>{
    a.style.opacity = 1
    a.style.height = 'auto'
}
let fun = (a,b)=>{
    ele_h(a)
    ele_s(b)
}

OK，解决了。