Question

是否有人知道是否可行，如何根据移动设备或桌面使用html 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测试屏幕大小，然后使用Ajax提取内容，或者将其硬编码到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媒体查询可以（更好？）获得相同的结果（请参阅@ Tom的回答）......

另外，请注意关闭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();
       });
   }
})();

使用data html属性加载不同的内容

3 个答案: