解决html页面闪烁,解决前端页面闪烁问题(转载)
修改 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 的元素即可解决。
something...
别让这个 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
解决html页面闪烁,解决前端页面闪烁问题(转载)相关推荐
- vue 离开页面时间_vue 前端页面无操作时,系统退出登录的定时器设计
一.背景 我们平时做系统为了保证用户操作数据的安全性,很多时候当用户长时间不再操作电脑的时候,应该给用户自动退出系统,这样可以防止有别人使用电脑操作上一个用户的数据. 二.设计想法监听鼠标移动以及键盘 ...
- 商城项目解析(前端页面知识,用户如何访问服务器,hosts的修改,nginx)
接上一篇商城分析继续写(在我的博客里面),大家如果想要看之前的分析就去我的博客里面去找,我下面会提到一些之前博客里面写的模块. 我们还需要搭建一个模块,就是一个工具类,叫做common模块,这个模块具 ...
- java前端项目经验_web前端页面项目经验总结
项目时间:2016年4月5日--4月9日 项目名称:阿七果子园web前端页面 项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_banne ...
- 解决前端页面闪烁问题(转载)
修改 Class 而不是 Style 我在不久前做过一个导航栏,要求其滚动到屏幕顶端后固定.很常见.开始的时候没问题,很快就可以搞定. nav {position: absolute;top: 60p ...
- php json转数组后并在前端展示,0516-如何从服务器端获取JSON格式字符串并解决到前端页面中显示...
一. 如何从服务器端获取JSON格式字符串并解决到前端页面中显示 1.采用AJAX异步方式从服务器请求必须为字符串的数据:例如 $PHP= '{"aaa":"bbb&q ...
- 22-CMS前端页面查询开发-Api调用-跨域解决
跨域问题解决 测试 上边的代理 ,结果 报错如下 : No 'Access-Control-Allow-Origin' header is present on the requested resou ...
- jsPdf+html2Canvas+react实现前端页面导出pdf,并解决jspdf分页图片过长截断问题
第一步 在utils下面创建一个工具文件exportPDF.js 以下每一句代码都有对应的注释,并且针对不同情况,作出了相应的解释,如果有需要的话,请耐心看完. import html2Canvas ...
- 解决前端页面中文乱码问题
前端页面乱码问题解决 方法: 解决代码: 方法: 确定开发工具的各种编码格式配置为 utf-8 确定前端页面的编码格式 request,response携带的数据的编码格式,可通过 过滤器 设置 Ch ...
- 解决浏览器页面缩放前端页面大小自适应改变的问题
平时写前端页面的时候,css大小都在用px,现在可以采用rem的方法解决这个问题 首先需要明白px与rem的区别: px是固定的像素,一旦设置了就无法适应页面的大小而进行改变. em和rem是相对长度 ...
最新文章
- 简单几何(推公式) UVA 11646 Athletics Track
- openssh for windows
- c语言预处理器指令的简单例子
- Java文档阅读笔记-JPA Tutorial
- php 日期转毫秒_高性能的PHP日志系统 SeasLog 使用
- storm the 少儿英语_米粒英语绘本课堂——The Snowstorm
- 设计模式7------装饰者模式(Decorator Pattern)-------结构模式
- 渗透测试专业术语——攻击篇
- MATLAB人脸识别系统
- Java算法中O(1),O(logn),O(n),O(nlogn),O(n2)是什么
- pid是滞后超前校正_如何理解超前补偿、滞后补偿、超前滞后补偿?
- Azure Machine Learning Studio 实例 -- 预测xx年的食物工厂总数
- 后ERP时代之协同运营管理平台实践
- *2-3 OJ 1164 导弹拦截之升级版
- HCIP(华为高级网络安全工程师)(第五天)(OSPF协议1)
- 预约订座APP系统(基于uni-app框架)毕业设计毕业论文开题报告参考(2)app功能
- cscope 相关笔记
- 全面解析京东商城SEM策略(转载)
- python文件读写的重难点_Python读写文件需要注意的地方
- 说人话的外科总论-第二章 无菌术
热门文章
- 自己动手写操作系统--个人实践
- ORA-32004错误的解决方法
- 维基链锚定行业缺口,定位发展一体化DeFi,持续开发出各类产品应用,包括去中心化抵押借贷系统Wayki-CDP(含稳定币WUSD)、去中心化交易所Wayki-DEX、去中心化合成资产协议Wayki-X
- 比特币现金是否失去了去中心化
- springboot oauth2 fetch 关于跨域请求的问题
- Hashmap,Set,Map,List,ArrayList的区别
- 【JS第28期】继承-借用构造函数
- linux网络配置练习
- PXE批量部署linux操作系统
- wordpress 后台,登录,注册开启https的重写规则