부트 스트랩 CSS 숨겨진 요소가로드됩니까?

Question

휴대 전화 및 태블릿을위한 모범 사례가 아닌 내 웹 사이트에 배경 비디오 헤더가 있습니다. 숨겨진 휴대 전화 및 숨겨진 태블릿을 사용하는 기기에는 콘텐츠가 표시되지 않습니다. 비디오가 꽤 무거 우므로 비디오가로드되지 않아서 페이지가 더 밝아지고 대역폭이 절약되어 좋을 것입니다 (재생되지 않을 것이므로).

그래서 여기 있습니다. 질문, 그 클래스는 (모바일) 브라우저가 비디오를로드하지 못하도록합니까?

Answer 1

예, DOM을 작동시키는 방법입니다. 당신이 JS를 필요로하는 것을 적재하지 않도록하십시오. 예를 들어, 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); 
     } 
    }); 
});