首页前端开发CSScss中如何让图片先不出现

css中如何让图片先不出现

时间2023-07-16 23:54:01发布访客分类CSS浏览665
导读:在开发网页时,通常都会使用CSS来美化页面。而在CSS中,图片常常是会让一些网页出现加载缓慢的问题。所以在大部分情况下,我们希望图片不会一开始就出现。那么该如何实现呢?img{display: none;}以上的代码将会隐藏网页中所有的图片...

在开发网页时,通常都会使用CSS来美化页面。而在CSS中,图片常常是会让一些网页出现加载缓慢的问题。所以在大部分情况下,我们希望图片不会一开始就出现。那么该如何实现呢?

img{
    display: none;
}

以上的代码将会隐藏网页中所有的图片。但是如果我们想要让图片在特定的事件或滚动到页面的某个位置之后再出现,该怎么办呢?

window.addEventListener('scroll', function(){
    var img = document.getElementsByTagName('img');
    var len = img.length;
    for(var i=0;
iimg[i].offsetTop - 200){
    img[i].style.display = 'block';
}
}
}
    )

以上代码实现了当页面滚动到图片顶部200像素的位置时才将图片展示出来的效果。你也可以更改“200”以通过更改位置参数来调整图片展示的时间。

以上便是CSS中如何让图片先不出现的方法,希望对你有所帮助。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css中如何让图片先不出现
本文地址: https://pptw.com/jishu/314771.html
css3地球旋转3d动画 css判断元素是否有属性

游客 回复需填写必要信息