我目前正在构建一个实践响应式网站，我正在做的是使用一个现有的网站，使用 twitter bootsrap js 和 css 构建它，这意味着它将完全响应移动设备。
问题是网站上有一些大型轮播和图片。理想情况下，我只想完全删除某些元素，例如轮播，而是将轮播中的选项作为标准列表菜单。
似乎主要选项是基于媒体查询的display:none，但我开始预见，如果整个桌面网站仍然要在移动设备上加载，我会遇到加载时间的大问题，只有元素隐藏。
有没有办法根据浏览器大小完全排除 html？如果有人有任何好的链接或文章，那就太好了。甚至只是意见，关于是否真的需要排除 html。
谢谢
【问题讨论】：
标签： php html css mobile responsive-design
首先很高兴看到虽然您在谈论display:none;，但您实际上仍然希望显示内容而不需要图像的花里胡哨。你干得好。
我接下来要看的是，如果您不想为移动设备加载图像，那么为什么要为较大的网站添加它。如果图片没有提供功能，帮助更好地解释内容，那为什么不把它也放到桌面大小呢？
如果它确实有助于讲述一个故事，那么您可以包含图像和一些流行的图像服务，例如 adaptive images、hiSRC 或 PictureFill，它们将首先提供图像的移动版本并替换在更高的视口上使用更大的图像（但请记住，没有带宽测试）。
最后，如果您确实想提供一些不同的内容，那么请采纳 fire 的建议，在 ajax 中包含更多内容。 Filament 组的South Street toolbox 可以帮助您，请特别注意 AjaxInclude 模式（它也有指向图片填充的链接）。
【讨论】：
您可以考虑存储大量 JSON 编码的数据，然后像这样创建元素并按需加载它们
var heavyImage = new Image();
heavyImage.src=imageList[id];
然后您可以将图像元素附加到所需的块。根据我使用手机的经验，这比通过 AJAX 请求 <img> 更强大，因为 AJAX 有时可能会很慢。
您还可以使用此方法“预取”图像（例如当前可见的 2-3 相邻），从而改善用户体验。
【讨论】：
您可以通过 AJAX 引入重元素，这样它们最初就不会停留在页面上，从而加快加载速度。仅当屏幕尺寸大于 X 时，您才可以决定执行 AJAX 调用。
【讨论】：
如果你愿意，你可以使用visibility:hidden，或者如果你使用jQuery，你可以使用
$(element).remove() //to remove completely
$(element).hide() //to hide
$(element).fadeOut(1) //to fadeout
【讨论】：