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