是否有一种方法可以阻止内容在最小宽度屏幕上加载

Question

我正在制作一个响应式网站，我有一个视频背景的第一个屏幕，我想隐藏在移动设备上的视频，使网站加载速度更快。确定显示:none;不会禁止内容下载。我尝试了这两个javascript来禁用在小屏幕上加载内容，但它仍然在后台加载:

if (screen.width < 768){
var removeelement = document.getElementById("videoClass");
removeelement.innerHTML = "";
}

或:

$("#videoClass").remove();

的作用和CSS标签一样:display-none。在javascript中是否有任何方法可以防止内容在后台加载内容?

Answer 1

可以使用:

if (screen.width < 768){
    $("#videoClass").empty();
}

Answer 2

添加以下代码，使选定div的html为空。

if(window.innerWidth <  768 )//screen.width < 768 
  {
   $("#videoClass").html("");
  }

Answer 3

我认为解决这个问题的最佳方法就像Laxmikant Dange和VanderVidi所说的，所有这些javascript和jqueries都很好，但问题是我如何加载视频。我使用此代码仅在宽度>768的屏幕上下载内容

<video id="videoClass">
<!-- removed the content from here -->
</video>
<script>
$(document).ready(function() {
if (screen.width > 768){
var showElement = document.getElementById("videoClass");
//pasted the content here:
showElement.innerHTML = '<source src="video.mp4" type="video/mp4">';
}
});
</script>

这解决了问题，内容现在只能在更大的屏幕上加载。非常感谢你的帮助。