有條件地顯示基於媒體查詢的內容

我有一個網站，在桌面版本中顯示一個側欄包含10到20個小圖片。到目前爲止，在移動設備上，此側邊欄僅僅隱藏着一個display: none，這是性能最差的解決方案，因爲無論如何將會加載所有圖像。有條件地顯示基於媒體查詢的內容

我現在想知道什麼是最好的方法是完全禁用移動設備上的邊欄（不使用單獨的AJAX請求）。

我能想到的最好的解決方法是：

通過檢查用JavaScript媒體查詢寫側邊欄的HTML代碼到一個JavaScript變量
測試裝置寬度（例如，使用Modernizr.mq左右）
如果此測試產生非移動裝置，通過使用innerHTML，jQuery.append，jQuery.prepend或類似

012寫變量到DOM的內容，例如

我知道RWD的性能有時可能是一個非常複雜的話題，最高性能的解決方案通常並不明顯。那麼任何人都可以想到比上面提到的更好的解決方案嗎？

來源

2013-03-11 m4r73n

我認爲這是一個很好的解決方案...您可以使用jQuery.mobile.js插件來查找設備是否使用簡單的1行if語句觸發移動站點。 – tymeJV 2013-03-12 13:18:57

如果您不想將圖像加載到移動設備上，而不是將圖像設置爲<img>標籤，則可以將div設置爲所需的寬度和高度，並將圖像作爲背景圖像。在你的CSS中，默認情況下隱藏側邊欄。然後，無論您認爲超出移動寬度的任何寬度，都可以使用媒體查詢來顯示邊欄並將背景圖像加載到div中。

#sidebar { 
    display: none; 
} 
#sidebar div#sidebar-img-1 { 
    width: 100px; 
    height: 100px; 
} 
/* ... */ 

@media only screen and (min-width: 480px) { 
    /* display sidebar */ 
    #sidebar { 
     display: block; 
    } 
    /* set background image for sidebar items */ 
    #sidebar div#sidebar-img-1 { 
     background-image: url("sidebar1.jpg"); 
    } 
    /* ... */ 
}

缺點是，通過在樣式表中放置內容，可以交易語義的性能。

來源

2013-03-12 23:08:36 idahotallpaul

我認爲jQuery Lazy Load插件（https://github.com/tuupola/jquery_lazyload）是用於此目的的更靈活的方法。 – m4r73n 2013-03-13 09:56:19

我只是做就如何做到這一點，就遇到了這個由長絲組的一些研究： https://github.com/filamentgroup/Ajax-Include-Pattern/

似乎很容易成立。它的工作原理與數據屬性中設置的媒體查詢類似。

所以，你不希望出現在手機側邊欄會是這個樣子：

<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside>

所以，你的側邊欄只會進來，這是至少40ems（〜640像素）寬的屏幕上。當然，你也需要JavaScript文件並啓動它，但那些看起來也相當簡單。

來源

2013-10-04 12:48:43 user1121622

然而，這確實會添加一個ajax請求。仍然是一個相當不錯的技術IMO。 – user1121622 2013-10-04 12:51:19

有條件地顯示基於媒體查詢的內容

回答

相關問題