解决前端页面闪烁问题(转载)
修改 Class 而不是 Style
我在不久前做过一个导航栏,要求其滚动到屏幕顶端后固定。很常见。开始的时候没问题,很快就可以搞定。
nav {position: absolute;top: 60px;
}
var scroll=0;
var nav=$("nav");
var navST=60; //该元素距离网页顶端60px $(window).scroll(function(){ if($(document).scrollTop()>navST && scroll==0){ nav.css({position: "fixed",top: "0"}); scroll=1; } else if($(document).scrollTop()<=navST && scroll==1){ nav.removeAttr("style"); scroll=0; } });
运行很流畅。
做好,我自然就忙着网页内容去了。没曾想,随着页面 JS 的不断增加,导航栏在固定时出现了可怕的闪动。
唔,就是 一下看得见 一下看不见 的东西!
应该有不少人和我一样。百度,无果。谷歌,看不懂,翻译也不行。
不知道真相的我,眼泪 流下来。
哦!一道莫名的亮光从我的眼前闪过!这道亮光里,有希望,,有兴奋,,组成了四个大字:
元素重绘
就在这千万分之一秒,亿万分之一秒 里,我理解了:
nav.css({position: "fixed",top: "0"});
这一句 JS 产生了两次 DOM 写入,影响浏览器渲染页面两次。
使用 $.addClass 语句可以解决。
nav {position: absolute;top: 60px;
}
.fixed { position: fixed; top: 0; }
var scroll=0;
var nav=$("nav");
var navST=60; //该元素距离网页顶端60px $(window).scroll(function(){ if($(document).scrollTop()>navST && scroll==0){ nav.addClass("fixed"); scroll=1; } else if($(document).scrollTop()<=navST && scroll==1){ nav.removeClass("fixed"); scroll=0; } });
闪烁问题得到了临时解决。
采用不可见元素减少 DOM 变更产生的运算
“临时” 说法的原因是当 JS 数量再次增加,达到又一新高度后,闪烁问题再现。
原因大概是 $.addClass 时浏览器需要重新计算该元素位置, JS 数量过多使计算过程明显。
不多说,在 HTML 里多放一个包含 .fixed 的宽高为 0 的元素即可解决。
<div class="fixed"></div> <nav>something...</nav>
别让这个 div.fixed 显示出来。
至此,全面解决 “动态添加样式导致的元素闪烁” 。
原生 JS 进一步加快速度避免闪烁
jQuery 是个好东西。原生 JS 更是个好东西。
有些 jQuery 代码,被转化为好多条原生 JS 才实现效果。
然而其实只需要一条。
将 jQuery 代码转化为原生 JS 是个加快速度,避免闪烁的不二选择。
var scroll=0;
var navST=60; //该元素距离网页顶端60px window.onscroll = function(){ if(document.documentElement.scrollTop || document.body.scrollTop>navST && scroll==0){ document.getElementsByTagName("nav")[0].classList.add("fixed"); scroll=1; } else if(document.documentElement.scrollTop || document.body.scrollTop<=navST && scroll==1){ document.getElementsByTagName("nav")[0].classList.remove("fixed"); scroll=0; } };
谢谢阅读!
https://segmentfault.com/a/1190000006216880
转载于:https://www.cnblogs.com/hubgit/p/8057975.html
解决前端页面闪烁问题(转载)相关推荐
- 解决html页面闪烁,解决前端页面闪烁问题(转载)
修改 Class 而不是 Style 我在不久前做过一个导航栏,要求其滚动到屏幕顶端后固定.很常见.开始的时候没问题,很快就可以搞定. nav { position: absolute; top: 6 ...
- 解决html页面闪烁,前端页面闪烁的问题解决方案
平时遇见使圈是的编小久据直请结未屏屏会气机页实应高用VUE遇见页面闪烁的问题,总结了三点希望对以后大家开发有帮助能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果: 遇见在如C ...
- 前端页面闪烁的问题解决方案
平时遇见使用VUE遇见页面闪烁的问题,总结了三点希望对以后大家开发有帮助: 遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ), 或者是模块(div)的闪烁.对于 ...
- 解决前端页面中文乱码问题
前端页面乱码问题解决 方法: 解决代码: 方法: 确定开发工具的各种编码格式配置为 utf-8 确定前端页面的编码格式 request,response携带的数据的编码格式,可通过 过滤器 设置 Ch ...
- #前端# 解决前端页面滑动不顺畅的问题
看情况有时候需要将body和html同时选择. 转载于:https://www.cnblogs.com/tnt-33/p/8464370.html
- 前端页面闪烁提示用户
记录 // 需要闪烁的内容 .flickerHint {color: #fff;width: 100%;height: 20px;background-color: red;text-align: c ...
- 解决前端页面在笔记本和台式显示器比例大小不一问题(适配笔记本125% 150%缩放解决方法)
vue在需要适配的页面,比如登录页加入以下代码 created() {let t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% - ...
- Tomcat部署服务成功,前端页面乱码问题处理
Tomcat部署服务后,乱码问题处理 Tomcat小窗口乱码及日志乱码问题处理 Tomcat在启动项目后,如果没有经过配置,可能会出现Tomcat小窗口乱码问题,影响大家对日志的查看.在此时我们可以修 ...
- 解决layui使用定时器对table数据重载导致页面闪烁的问题
最近使用layui做前端,使用了table,由于需要添加定时器刷新table,导致页面闪烁,令人生不如死.然后就拼命的百度找解决方法,终于找到了组织. LAYUI用TABLE.RENDER加载数据 用 ...
最新文章
- Vue mixins(混入) 附代码示例详解
- 资源 | 想用Python学机器学习?Google大神替你写好了所有的编程示范代码
- java swf转pdf_doc转pdf和pdf转swf
- 测试ASP_NET 生命周期
- php实现享元模式,php设计模式 flyweight (享元模式)
- python连接mysql代码_Python连接MySQL的实例代码
- AR导航真的有前途,马云领衔1亿2500万投资
- [python]一个遍历多层文件夹,然后替换文件内容和目录名称的案例
- java64位安装包下载_java64位安装包
- C语言中数据的输出格式有哪些?
- 项目进度管理:制定进度计划
- 家庭财务软件的概要分析
- 重装上阵两个人合体机器人_重装上阵:组装机器人是正常人的行为,要我就搞出点花样来...
- python贴吧-学点python吧,别再这么累了
- 线性表的链式存储结构详解
- javascript基础常识问答(二)
- 案例分享 | 蜂窝,是“蜂窝”,虹科HK-DAT数字衰减器助力蜂窝设备测试
- python为什么运行不了_终端里为什么无法运行python?
- DataTables warning:table id = TableDate: Cannot reinitialise DataTable的解决办法
- 通过PC发送手机短信
热门文章
- logging日志配置,day95下午
- 使用chardet判断编码方式
- Spring配置中context:annotation-config VS context:component-scan
- tensorflow l2_loss函数
- 我所遇到的C++连接问题汇总
- (转)Android 使用com.j256.ormlite
- iOS SDK:iOS调试技巧
- 无路可逃java攻略_生化危机2重制版无路可逃怎么过_100丧尸模式幽灵生还者无路可逃流程攻略_3DM单机...
- Sql Server 2005的1433端口打开和进行远程连接
- OVS DPDK--虚拟设备配置(六)