有条件地显示基于媒体查询的内容

我有一个网站，在桌面版本中显示一个侧栏包含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

有条件地显示基于媒体查询的内容

回答

相关问题