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

如题,

用的是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的媒体查询做隐藏,但是这样我滚动条事件就没辙了...