如何有条件地加载内容（移动优先）

我即将创建我的第一个“移动优先”网站，并且无法确定在视口增加时有条件加载内容的最佳方式。如何有条件地加载内容（移动优先）

例如，假设我希望仅为桌面浏览器加载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

如何有条件地加载内容（移动优先）

回答

相关问题