替代顯示：無移動

我目前正在建立一個練習響應式網站，我正在做的是採取一個正在興起的網站，使用twitter bootsrap js和css構建它，這意味着它將完全響應移動。替代顯示：無移動

問題是，網站上有一些大的輪播和圖像。理想情況下，我想完全刪除某些元素，例如旋轉木馬，並將輪播中的選項作爲標準列表菜單。

基於媒體查詢，似乎主要選項是display:none，但我開始預見如果整個桌面網站仍將被加載到移動設備上，我將遇到大量加載時間問題，只有隱藏的元素。

是否有方法根據瀏覽器大小完全排除html？如果任何人有任何好的鏈接或文章，將是偉大的。甚至只是意見，關於是否確實需要排除html。

謝謝

來源

2013-01-22 Adrian

這樣做的唯一好方法是我可以看到服務器端的不同版本 –

首先，我們非常高興地看到，儘管您在討論display:none;，但實際上您仍然希望顯示內容，而無需顯示圖像的花裏胡哨。幹得好你。

接下來我要看的是如果您不想爲移動設備加載圖片，那麼您爲什麼要爲較大的網站添加圖片。如果圖像沒有提供功能，幫助更好地解釋內容，那麼爲什麼不把它放到桌面大小呢？

事實上，如果它確實有助於講一個故事，那麼你可以包括圖片和一些喜歡adaptive images，hiSRC，或PictureFill流行的圖像服務，將首先服務於圖像的移動版本，並在更大的圖像替換更高的視口（但請記住，沒有帶寬測試）。最後，如果你確實想要提供一些不同的內容，那麼請接受火警的建議，包括更多與Ajax有關的內容。來自Filament團隊的South Street toolbox可以幫助你，特別注意AjaxInclude模式（它也有一個圖片填充的鏈接）。

來源

2013-01-22 12:17:34 justinavery

謝謝你，我想我必須學習ajax路線，因爲這可能是一個問題，不僅僅是圖像，而是用不同的元素替換整個元素。關於這些圖片，我會看看這些鏈接，看看它們是如何工作的，因爲我認爲圖像對於桌面系統來說是值得的，而且大多數人都有足夠高的寬帶連接來處理它們。 – Adrian

你可以在重元素通過AJAX拉，這樣他們就不會在頁面上坐最初，使其加載速度更快。你可以決定做AJAX調用僅當如果你願意，你可以使用visibility:hidden的屏幕尺寸小於X.

來源

2013-01-22 11:57:05 fire

較大，或者如果你使用jQuery，您可以使用

$(element).remove() //to remove completely 
$(element).hide() //to hide 
$(element).fadeOut(1) //to fadeout

來源

2013-01-22 11:58:06 Enve

它是否阻止圖像被首先加載？ – Aprillion

img元素必須在DOM被刪除之前成爲DOM的一部分。到它那時，瀏覽器已經知道請求圖像。 – cimmanon

你可以考慮將重數據JSON編碼，然後創建元素和裝載它們按需像這樣

var heavyImage = new Image(); 
heavyImage.src=imageList[id];

然後就可以像元件附加到期望的塊。從我使用手機的經驗來看，這比通過AJAX請求<img>更強大，因爲有時AJAX可能會很慢。

你也可以用這種方法'預取'圖像（比如2-3眼臨近可見），從而改善用戶體驗。

來源

2013-01-22 12:15:10

替代顯示：無移動

回答

相關問題