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

Posted 2023-03-06

【中文标题】有没有办法阻止内容在最小宽度屏幕中加载

【英文标题】：is there a way to stop content from loading in min-width screens

【发布时间】：2016-01-16 17:45:18

【问题描述】：

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

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

或者：

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

他们做与 CSS 标签相同的工作：display-none。 javascript中有什么方法可以防止内容在后台加载内容吗？

【问题讨论】：

这取决于您如何加载视频，在视频加载之前添加条件。

阅读link 1和link 2

我会做一个 if 语句来检查该网站是否是从移动设备上查看的。然后，相应地注入视频代码。

【参考方案1】：

你可以使用：

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

【参考方案2】：

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

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

【参考方案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>

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