rem布局刷新页面瞬间尺寸从小变大；页面css样式错乱；跳转出现闪烁；页面渲染错乱

toahin

已于 2023-10-08 15:10:04 修改

阅读量339

点赞数

文章标签： css javascript

于 2023-09-26 16:01:47 首次发布

本文链接：https://blog.csdn.net/qq_43636471/article/details/133312040

版权

注：此解决方案会被运营骂死，谨慎使用，亲测会被骂……

原因：rem转px的缘故，rem.js中DOMContentLoaded事件是在html构建完成即加载，css样式可能未加载生效。

rem.js文件：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {			
          var clientWidth = docEl.clientWidth; // 获取设备尺寸       
          if (!clientWidth) return;
          if(clientWidth>=1620 ){
            docEl.style.fontSize = '100px';
          }else if(clientWidth>640){								
            docEl.style.fontSize = 100 * (clientWidth / 1620) + 'px';
          }else{					
            docEl.style.fontSize =  100 * (clientWidth / 640) + 'px';
          }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

解决方法：body添加属性opacity:0，在未加载完之前不显示。在onload事件中将body的opacity变成1


  <body style="opacity: 0;">
    <script>
       window.onload = function() {
         document.getElementsByTagName("body")[0].style.opacity = '1'
       }
    </script>
  </body>

DOMContentLoaded	浏览器完成HTML加载，构建DOM树之后触发，可操作DOM，不包括外部资源（如：图片、样式表）。前
onload	整个页面完全加载完成时，包括外部资源。后

toahin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem布局刷新页面瞬间尺寸从小变大；页面css样式错乱；跳转出现闪烁；页面渲染错乱

rem布局刷新页面瞬间尺寸从小变大；页面css样式错乱；跳转出现闪烁；页面渲染错乱。原因：rem转px的缘故，rem.js中DOMContentLoaded事件是在html构建完成即加载，css样式可能未加载生效。解决方法：body添加属性opacity:0，在未加载完之前不显示。在onload事件中将body的opacity变成1。
复制链接

扫一扫