如何有條件地加載內容（移動優先）

我即將創建我的第一個「移動優先」網站，並且無法確定在視口增加時有條件加載內容的最佳方式。如何有條件地加載內容（移動優先）

例如，假設我希望僅爲桌面瀏覽器加載Twitter供稿，而不是手機，我該怎麼做？

選項1）顯示：無 - 這是一個糟糕的內容仍然加載了移動

選項2）具備標記內容，但remove.element使用javascript - 我相信這些內容還會先加載，然後被刪除後？如果是這樣，不好。

選項3）使用JavaScript，如果視口足夠寬，加載內容 - 這似乎是我推薦的方法，但我讀過，但在JavaScript中有標記是一個好主意嗎？我在考慮可訪問性，語義和seo。

還有其他更好的解決方案嗎？

任何意見將不勝感激。

來源

2013-03-08 Adam

誰說的？ Display:none;是顯示和隱藏任何特定視口元素的最佳實踐。有一件事Adam，標記是每個設備最少下載的東西，如果你通過Jquery或Javascript隱藏元素，他們必須處理一些其他的東西。因爲有時小設備或者不支持加載它們或者花費額外的時間，這就是爲什麼它們是可見的。

但它有SEO目的的陷阱。對於SEO優化以及隱藏元素，您可以使用CSS執行其中一項操作。

首先，

@media screen and (max-width:480px) { 
    div { 
position: absolute; 
left: -9999em; 
width: 0; 
height: 0; 
overflow: hidden; 
     } 
}

但它是不太efective因爲谷歌網站管理員需要照顧所有這些黑客。而且你可能被Google列入黑名單。所以你應該使用這些現代方法之一來隱藏元素。

其次，

div { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    padding: 0 !important; 
    border: 0 !important; 
    height: 1px !important; 
    width: 1px !important; 
    overflow: hidden; 
      }

，或者第三，

div { 
    color:transparent; 
    text-indent:100%; 
    overflow:hidden; 
    white-space:no-wrap; 
    font:0/0 a; 
    text-shadow:none; 
      }

來源

2013-03-08 17:48:28

感謝您的迴應。你是對的顯示：沒有不壞，實際上是非常有用的，但是當試圖加載整個內容塊時，包括javascript，如twitter feed，display：none在這個實例中不應該被使用，因爲手機將不得不下載該javascript，即使內容不會顯示。因此，簡單地隱藏內容不是我想要做的，我試圖阻止它完全加載 – Adam 2013-03-08 17:52:42

爲此，您必須轉到Twitter提要框並檢查其將從服務器接收響應的類並停止它通過在該實例上打破它，或者只是簡單地從其父元素中刪除它。它在javascript中更簡單快捷。 – 2013-03-08 18:02:07

沒有Twitter的飼料只是一個例子。如果它是通用內容呢？我正在尋找JavaScript解決方案。我認爲你沒有正確理解這個問題。我正在尋找在屏幕變大時有條件加載內容的最佳方式。 – Adam 2013-03-08 18:23:29

你可能想看看Modernizr。這很容易安裝，您可以使用它檢查訪客瀏覽器中的HTML5支持，以及窗口寬度，例如：

if (Modernizr.mq('(min-width: 400px)')) { 
/* do this for tablets and desktops */ 
}else{ 
/* do this for handhelds */ 
}

祝您好運！

UPDATE

感謝，但隨後在這種情況下，豈不是更好地做到這一點直接用JavaScript - 如果（document.documentElement.clientWidth> 640）

你是對的，對於決定是否加載Twitter Feed的特定實例，可能沒有使用我對您的選項3的建議的一大優勢。儘管如此，藉助地下設計，移動網站和現在的HTML5，接下來的問題是如何針對不同的視點定製CSS，或者如何測試訪問者的瀏覽器是否支持某個HTML5功能。

你當然可以採取自己的方法，併爲每種情況編寫自定義JavaScript，或者你可以使用Modernizr來測試訪客瀏覽器是否支持媒體查詢，如果它不加載respond.js或使用Modernizr測試vistor的瀏覽器是否支持地理位置或HTML5格式或某些視頻格式...，以及它是否有條件加載cross browser polyfill。

實現同一個目標通常有多種方式，我強調不要重新發明車輪;）

來源

2013-03-08 19:14:29

謝謝，但在那種情況下，它會不會更好地直接用javascript做 - if（document.documentElement.clientWidth> 640） - 但這是我的問題中的選項3。 – Adam 2013-03-08 20:23:33

如何有條件地加載內容（移動優先）

回答

相關問題