• 當前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 網(wǎng)站建設 >> 網(wǎng)站維護 >> 網(wǎng)頁刷新一下頁面要顫抖閃下，布局顛簸抖動了下的解決方法

網(wǎng)頁刷新一下頁面要顫抖閃下，布局顛簸抖動了下的解決方法

• 作者：創(chuàng)新互聯(lián) 文章來源：網(wǎng)站建設部 點擊數(shù)： 更新時間：2017-09-22
• 網(wǎng)站建設好了頁面特別美觀，看著也忒舒坦。但美中不足的是每刷新一下頁面就要閃下出個白底，頁面先是往右邊移動了下，在顯示右邊的滾動條，頁面又往左邊移動。時間很短人眼看著有點累不舒服。
  
  我們要怎么處理這個閃下頁面顫抖、顛簸抖動呢？
  

  測試了N多個瀏覽器，
  發(fā)現(xiàn)在IE8和Chrome會抖動，是右邊滾動條的原因

  
  影響出來這種原因有點多，我們先來分析：
  
  1、頁面高度在瀏覽器中渲染問題，顯示器高度 大于 網(wǎng)頁內(nèi)容呈現(xiàn)高度時右邊的滾動條就要顯示出來。這里頁面中比如有個js要執(zhí)行耗時有1，2秒。在往下執(zhí)行加載內(nèi)容 網(wǎng)頁高度就 大于 顯示器高度了，右邊的滾動條就展顯出來了。問題就出來了這1，2秒鐘的時間頁刷新一下就要閃下抖動下。
  
  解決方法
  如頁面中間插入了js 建議把js放到html代碼的head中去，不要放到的中間都可以。
  
  要是js位置調(diào)整了還要抖動，應改就是js代碼中有多次讀或?qū)懩承┰�素的高度�?br /> 如
  
  // 讀
  var h1 = element1.clientHeight;
  // 寫（無效布局）
  element1.style.height = (h1 * 2) + 'px';
  
  // 讀（觸發(fā)布局）
  var h2 = element2.clientHeight;
  // 寫（無效布局）
  element2.style.height = (h2 * 2) + 'px';
  
  // 讀（觸發(fā)布局）
  var h3 = element3.clientHeight;
  // 寫（無效布局）
  element3.style.height = (h3 * 2) + 'px';
  
  
  解決方法
  
  把讀的代碼放在一起，寫的代碼放在一起就OK了。
  
  // 讀
  var h1 = element1.clientHeight;
  // 讀（觸發(fā)布局）
  var h2 = element2.clientHeight;
  // 讀（觸發(fā)布局）
  var h3 = element3.clientHeight;
  
  // 寫（無效布局）
  element1.style.height = (h1 * 2) + 'px';
  // 寫（無效布局）
  element2.style.height = (h2 * 2) + 'px';
  // 寫（無效布局）
  element3.style.height = (h3 * 2) + 'px';
  
  這有點小問題，在實際網(wǎng)站建設開發(fā)中可能沒這么簡單。代碼就必須要分散在不同地方執(zhí)行，才能達到實現(xiàn)效果。就要解耦代碼，控制好執(zhí)行順序。
  
  window.requestAnimationFrame函數(shù)。類似于setTimeout(fn, 0)，使用它來安排所有dom寫操作在一步一步執(zhí)行。保留所有dom讀操作在當前同步狀態(tài)。
  
  // 讀
  var h1 = element1.clientHeight;
  // 寫
  requestAnimationFrame(function() {
  element1.style.height = (h1 * 2) + 'px';
  });
  
  // 讀
  var h2 = element2.clientHeight;
  // 寫
  requestAnimationFrame(function() {
  element2.style.height = (h2 * 2) + 'px';
  });
  
  這樣就把代碼封裝好了。重點是requestAnimationFrame來延遲DOM寫操作。減少多次寫。靈活下寫同時也可以把讀放進去哦。
  
  FastDom輕量庫能讓DOM的讀/寫操作捆綁在一起，具體方法百度看說明文檔了。
  
  
  說到這可以大家都有點暈了。上面的一步一步來要網(wǎng)頁刷新一下頁面要顫抖閃下，布局顛簸抖動了還沒解決那就直接用這個方法吧！
  html{overflow-y:scroll;}
  就一句css樣式，簡單很實用。
  意思是不管網(wǎng)頁高度，把右邊的滾動條位置始終先留出來。
• 網(wǎng)站內(nèi)容該不該讓他復制 :上一篇
  網(wǎng)站常經(jīng)被掛馬，要怎樣處理 :下一篇