データhtml属性を使用して別のコンテンツを読み込み

Question

可能であれば、誰でも知っていますか？data属性を使用してモバイルやデスクトップによって異なるコンテンツを読み込むにはどうすればよいですか？ gif要素にdata-gifタグを設定し、ビデオ要素に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に必要なコンテンツをロードする場合は、JavaScriptで画面サイズをテストした後、アヤックス、もしくはJavaScriptのにハードコード、それを持つとコンテンツに引っ張っする必要があります。

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

一つの可能​​な答えは、（あなたの質問のように）JavaScriptを使用して：

は

(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

私はあなたがそれぞれのdivに同じビデオのリンクを持って見るので、必要が速くなりますときにのみ使用します。

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(); 
     }); 
    } 
})();