Question

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

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

或者：

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

他们做同样的CSS标签工作：display-none。在javascript中是否有任何方法可以阻止内容在后台加载内容？

Answer 1

添加下面的代码，这将使所选div的html为空。

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

Answer 2

你可以使用：

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

Answer 3

我认为解决这个问题的方法就像 Laxmikant Dange 和 VanderVidi 所说的那样，所有那些javascripts和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>

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

有没有办法阻止内容在最小宽度屏幕中加载

3 个答案: