设置display:none的图片,会在加载时先加载显示再隐藏

Question

如题,
用的是bootstrap的导航栏
我有三个图片(img1，img2，img3)
一个img1是宽度768px以下的，即手机平板端logo,
另一个img2是768px以上,滚动条没拉下去时的logo,那个时候导航是透明背景的,
第三张img3是768px以上,然后滚动条拉动到大概150左右就会出现的图片logo,这个时候导航背景色是白色,

最开始写的是
$(window).scroll(function(){

myFun1();

})

function myFun1 (){

if(document.body.clientWidth) {
    if($(window).scrollTop() > 150) {
        $('.img3').css({'display':'none'});
        $('.img2').css({'display':'block'});
        $('.img1').css({'display':'none'});
    }else {
        $('.img3').css({'display':'none'});
        $('.img2').css({'display':'none'});
        $('.img1').css({'display':'block'});
    }
}else {
    $('.img3').css({'display':'block'});
    $('.img2').css({'display':'none'});
    $('.img1').css({'display':'none'});
}    

}

那么问题来了,我设置的display:none的图片,也就是img2 他会在页面刚进去的时候显示以下然后再隐藏，这样的话效果不是很好,
可能有人问我为什么不用css的媒体查询做隐藏,但是这样我滚动条事件就没辙了...

Answer 1

可以默认先将图片全部隐藏，然后在做相应的操作。

Answer 2

因為你的隱藏是透過js去隱藏
但頁面剛載入的時候你的js可能還來不及執行

最好是先用css做好預設的處理
然後才用 js 把它們顯示