问题:最近维护一个产品官网,需要将所有产品降价200元,使用javascript函数修改后,会出现信息延迟问题,即在页面加载过程中出现旧的价格,页面加载完成后才会运行js脚本,修改为新的价格。
目标:我想在页面加载的时候不再出现旧的价格。
解决方法:
1.在css中给包裹价格的标签,这里是<strong>标签,添加 visibility: hidden;(不选择display: none;的原因是,这样在页面加载的时候,旧的价格会暂时隐藏,但所占空间仍在,后面修改的时候不会引起reflow和repaint,影响页面加载速度。)
2.在修改价格的函数下面增加一条,element.style.visibility = “visible”;,这样在价格修改完成之后就会直接显示新的价格。
解决过程中遇到的问题:
1.之前看到一个方法,即给body添加display:none;,在所有js脚本执行完之后执行修改body样式为display: block;的函数,这样所有的修改在页面显示之前进行完毕,避免多次回流和重绘,提升页面响应速度。但是一是我要修改的页面有很多图片,二是公司网速也慢,这样在加载过程中会长时间持续空白页面。
2.我试图给包含产品列表的div添加visibility: hidden;,但在页面加载时并没有起到隐藏效果,我在网上搜了下,原因是如果父元素设置了visibility: hidden;,子元素设置了visibility: visible;,那么子元素会正常显示。由于产品列表嵌套了多层盒子,为防止以后的修改影响到这次修改,所以最终我选择了直接给包含价格的strong标签添加visibility: hidden;。
参考文章:
https://coolshell.cn/articles/9666.html
http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/