用jQuery安全地重新整理頁面具有醜陋的加載外觀

因此，我有一個網站，我已經風格，並與CSS功能，以防萬一用戶無法使用JavaScript。關鍵是我使用jQuery進一步改變樣式，並將外部樣式表添加到「頭部」。用jQuery安全地重新整理頁面具有醜陋的加載外觀

現在隨着頁面加載，風格的變化可以在瞬間看到，但它使頁面看起來非常緊張（因爲一些風格變化很大）。我不希望我的用戶看到這種緊張的負載，並希望我能做些什麼來隱藏頁面的一些建議/如果jQuery在樣式更改期間稍後響應（慢速連接），則提供平滑過渡。

任何反饋將不勝感激！：）

來源

2016-07-04 Jonathan002

這可能不是你想要的答案，但這是你不應該使用JS代碼作爲柺杖來設計UI的主要原因之一; JS處理的延遲導致FOUC。如果可以，將所有樣式移至CSS。 –

你可以在渲染時添加一個「覆蓋」所有窗口的div。然後只隱藏這個div，並顯示加載的頁面，甚至是jQuery。 –

感謝您的反饋。經過一番思考和實驗後，我發現了一些我比JavaScript檢測或加載屏幕更喜歡的東西。

我決定做的是設計一個期待jQuery工作的網站，然後在底部添加一個安全樣式表，當jQuery和/或javascript不可用時，將會規範化並創建穩定的樣式。

畢竟我的腳本標記（正文的底部），我已經把它放在它下面的代碼。

<span id="removeMe"> 
     <script>$('#removeMe').remove();</script> 
     <link rel="stylesheet" href="css/safety.css"> 
     <script>alert('There is a problem with jQuery');</script> 
</span>

如果jQuery是離線，安全表將顯示和JavaScript將提醒問題。
如果javascript處於脫機狀態，它仍然會保留安全表。

注：請注意，如果任何風格的變化與與安全CSS干擾只是純JavaScript做，你可能要添加另一個跨度爲場景。

來源

2016-07-05 14:42:23 Jonathan002

爲什麼你擔心非JavaScript用戶的用戶體驗，然後給他們一個開發人員提醒？無腳本體驗的重點在於提供用戶友好的體驗。即使是一個開發人員也會因爲這個祕密而感到惱火。此外，至少向那些花時間回答你的問題的人提供讚揚是很常見的，假設答案是可行的解決方案。 –

你也應該重新考慮你的方法，不會拋出javascript錯誤。在嘗試.remove（）之前，可以使用typeof（$）條件來檢測jQuery是否未定義。有JavaScript錯誤時，舊版瀏覽器會觸發警告提示。 –

解決您的問題的一種方法是不通過JavaScript添加CSS，而是將其包含爲通常會作爲CSS鏈接。對於只針對啓用了JavaScript的設備的樣式表，只需添加一個由javascript添加的主體類即可。事情是這樣的：

JavaScript的樣式表

body.js header { display: block; } 
body.js footer { display: block; } 
body.js .my_jsmenu { display: block; } 
body.js .etc { display: block; }

標記

<head> 
    <!-- normal stylesheets --> 
    <link href="styles.css" type="text/css" rel="stylesheet" /> 

    <!-- js stylesheet --> 
    <link href="myjs_styles.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
    <script type="text/javascript"> 
     document.body.className += ' js'; 
    </script>

您還可以使用的HTML標記，它爲很多其他引擎如Modernizr的做的。如果你的css使用較少或者sass，這個過程就大大簡化了，但如果你不是，那麼它可能有點乏味。

就我個人而言，我避免這些JavaScript禁用的解決方案。任何在此時禁用JavaScript的人都會故意禁用，並知道他們無法獲得適當的體驗。我們過去不得不在2000年代這樣做，但我想說在2011年左右，這甚至不值得考慮。

至於jQuery調整樣式，請確保您的CSS覆蓋初始加載。你可以使用你的jQuery根據用戶交互或設備調整大小/滾動/視圖狀態進行調整，但是如果你的網站在javascript運行完成之前不能正確呈現，你的網站就會在SEO中被擊倒。結賬Google Page Speed Insights，以便正確分析您的用戶體驗以及它的加載配置，以獲取更多相關信息。

來源

2016-07-04 15:51:00

，如果你想使用裝載DIV另一種方法如下：

普通CSS（無JS檢測）

#loading { display: none; }

的Javascript CSS

#loading { 
    display: block; position: fixed; width: 100%; 
    height:100%; top:0; left:0; background-color:#fff; 
    z-index: 100; /* must be higher than all other z-indexes on your page */ 
}

標記

<!-- End of DOM --> 
    <div id="loading"> 
     <p>Loading message or ajax loading gif here</p> 
    </div> 
    <script type="text/javascript"> 
     (function($) { 
      $(document).ready(function() { 
       setTimeout(function() { 
        $('#loading').fadeOut(); 
       }, 2500); // Timeout will need to be adjusted based testing the page with various connection speeds for a balance that suits your target user. Chrome dev tools can help with this 
      }); 
     })(jQuery); 
    </script> 
</body> 
</html>

以上是簡化的方法。您可以將功能轉換爲可根據需要重複使用的功能，但這是您如何執行此功能的要點。沒有簡單或可靠的方法來檢測用戶的速度，因此，如果您必須與網站一起玩，以瞭解在不同連接速度下哪種方式效果最佳，以便獲得平衡的超時時間。這不是海事組織的首選方法，但如果你想要使用加載屏幕，這應該會給你一個很好的起點。

如果您的目標受衆加載速度足夠慢，以至UI在加載屏幕顯示不夠快之前顯示，則可以將加載div移動到您身體的開口;請記住，在IE8及更高版本中，z-index值無關緊要。 DOM後面的位置相對或絕對位置的任何元素都將在其上呈現。

來源

2016-07-04 16:15:06

用jQuery安全地重新整理頁面具有醜陋的加載外觀

回答

相關問題