데이터 html 속성을 사용하여 다른 콘텐츠로드

Question

가능한 경우 누구에게 알리거나 html data 속성을 사용하여 모바일 또는 데스크톱에 따라 다른 콘텐츠를로드하는 방법은 무엇입니까? gif 요소에 data-gif 태그를 설정하고 video 요소에 data-video 태그를 설정했습니다.

화면 크기에 따라 다른 콘텐츠를로드하는 것이 가능하지만이를 구현할 수 없다는 것을 알고 있습니다. 화면 크기에 따라 요소를 숨기고 싶지는 않지만 요소를 전혀로드하지 않으려합니다.

아래 코드를 참조하십시오. 나는 위에서 설명한 바를 여러 가지 방법으로 시도했지만 성공하지 못했습니다.

<div id="main> 
    <div class="box-one> 
    <img data-gif='http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif'> 
    <video data-video width="640" height="360" controls="" autoplay=""><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"></video>'; 
    </div> 

    <div class="box-two> 
    <img data-gif='http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif'> 
    <video data-video width="640" height="360" controls="" autoplay=""><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"></video>'; 
    </div> 
</div> 

JAVASCRIPT

(function(){ 

    var windowWidth = $(window).width(); 
    var maxDeviceWidth = 768; 

    if (windowWidth > maxDeviceWidth) { 
     //show video 
    } else { 
     //show gif 
    } 

})(); 

Answer 1

로딩 및 다른 두 가지를 내용을하는 표시 :

현재이 내가 가지고있는 코드입니다. DOM에 내용이 있으면로드됩니다. 그런 다음 CSS로 콘텐츠를 표시하거나 숨길 수 있습니다.

.box-one{ 
    display: none; 
} 
.box-two{ 
    display: block; 
} 
@media screen and (max-width: 768px){ 
    .box-one{ 
     display: block; 
    } 
    .box-two{ 
     display: none; 
    } 
} 

경우에만 DOM에 필요한 내용을로드하려면, 당신은 자바 스크립트와 화면 크기를 테스트 한 후 아약스, 또는 자바 스크립트에 하드 코드를와 함께 내용을 끌어해야합니다.

var windowWidth = $(window).width(); 
var maxDeviceWidth = 768; 
if (windowWidth > maxDeviceWidth) { 
    //Server the desktop version 
    //You can get the content with Ajax or load both and hide the other 
} else { 
    //Load the mobile content - either with Ajax, or hide the desktop content 
} 

Answer 2

한 가지 가능한 대답 (귀하의 질문에로) 자바 스크립트를 사용하여 :

이

(function() { 

    var windowWidth = $(window).width(); 
    var maxDeviceWidth = 768; 

    if (windowWidth > maxDeviceWidth) { 
     // show video 
     document.getElementById('box-one').style.visibility = 'visible'; 
     document.getElementById('box-two').style.visibility = 'hidden'; 
    } else { 
     //show gif 
     document.getElementById('box-one').style.visibility = 'hidden'; 
     document.getElementById('box-two').style.visibility = 'visible'; 
    } 

})(); 

같은 결과는 (? 이상)이 될 수는 (톰의 답변을 @ 참조) CSS 미디어 쿼리를 사용하여 달성 ...

또한, 나는 각 사업부에서 동일한 비디오 링크를 참조 ... 당신의 HTML에 따옴표를 닫는에

Answer 3

을 주목, 그래서 필요가 빨라집니다 경우에만 사용합니다.

var video = '<video data-video width="640" height="360" controls="" autoplay=""><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"></video>'; 
(function(){ 

    var windowWidth = $(window).width(); 
    var maxDeviceWidth = 768; 

    if (windowWidth > maxDeviceWidth) { 
     $("div#main div").each(function(){ 
     $(this).append(video); 
     $(this).find("img").remove(); 
     }); 
    } 
})();