设置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 把它們顯示