Question

我目前正在建立一个练习响应式网站，我正在做的是使用一个exising网站，使用twitter bootsrap js和css构建它，这意味着它将完全响应移动。

问题是网站上有一些大型旋转木马和图像。理想情况下，我想完全删除某些元素，例如旋转木马，而是将旋转木马中的选项作为标准列表菜单。

似乎主要选项是display:none基于媒体查询，但我开始预见如果整个桌面网站仍然会在移动设备上加载，我将遇到加载时间的大问题，只隐藏了元素。

有没有办法根据浏览器大小完全排除html？如果有人有任何好的链接或文章，那将是伟大的。或者甚至只是意见，是否确实需要排除html。

谢谢

Answer 1

您可以考虑存储JSON编码的大量数据，然后创建元素并按需加载它们

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

然后，您可以将图像元素附加到所需的块。根据我使用移动设备的经验，这比通过AJAX请求<img>更强大，因为有时候AJAX可能会很慢。

您也可以使用此方法“预取”图像（例如当前与可见的2-3相邻），从而改善用户体验。

Answer 2

首先，我很高兴看到虽然您正在谈论display:none;，但您实际上仍然希望在没有图像的花边和口哨声的情况下显示内容。干得好。

接下来我要看的是，如果您不想为移动设备加载图片，那么为什么要为更大的网站添加图片呢？如果图像没有提供功能，有助于更好地解释内容，那么为什么不把它放在桌面尺寸上呢？

如果实际上它确实有助于讲述故事，那么您可以添加图片和一些流行的图片服务，例如adaptive images，hiSRC或PictureFill，这些服务将用于移动版本首先是图像，然后在较高视口处用较大的图像替换（但请记住，没有带宽测试）。

最后，如果您确实希望提供一些不同的内容，那么请使用ajax包含更多内容。来自Filament小组的South Street toolbox可以帮助您，特别注意AjaxInclude模式（它还有一个指向图片填充的链接）。

Answer 3

你可以通过AJAX拉入重元素，这样它们最初就不会坐在页面上，从而加快了加载速度。只有当屏幕大小大于X时，您才可以决定进行AJAX调用。

Answer 4

如果您愿意，可以使用visibility:hidden，或者如果您使用jQuery，则可以使用

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