Bootstrap CSS 是否隐藏加载元素？

Question

我的网站上有一个背景视频 header，这不是手机和平板电脑的最佳做法... 为了避免在这些设备上显示它，我使用 hidden-phone 和 hidden-tablet。由于视频很重，如果它不（下载）加载它会很好（因为它不会播放），这样页面会更轻，我的带宽也节省了...

所以这是我的问题，这些 class 会阻止（移动）浏览器加载视频吗？

Answer 1

是的，它会加载它，这就是 DOM 的工作方式。为了不加载你需要 JS 的东西。例如，使用 JS 检查视口是否足够小以满足特定条件，而不是使用 JS 填充视频或将其删除。

编辑：您也可以尝试在移动设备上禁用自动播放，这样浏览器解析时就不会预取它 DOM。

$(function() {

    // onload
    if(document.body.clientWidth >= 870) {
        $('video').attr('autoplay', true);
    }

    // If you want to autoplay when the window is resized wider than 780px 
    // after load, you can add this:

    $(window).resize(function() {
        if(document.body.clientWidth >= 870) {
            $('video').attr('autoplay', true);
        }
    });
});

Bootstrap CSS 是否隐藏加载元素？

Does Bootstrap CSS hidden loads element?

css

hidden

html5-video

twitter-bootstrap-3