防止使用 CSS 加载元素？答案

【问题标题】：Prevent Elements from Loading with CSS?防止使用 CSS 加载元素？
【发布时间】：2017-02-15 04:05:47
【问题描述】：

我正在使用 bootstrap 制作视频轮播，但遇到了一个问题：许多移动设备无法自动播放 HTML5 视频。我想没问题，我将只使用 CSS 中的 hidden-desktop 和 hidden-mobile 标签，然后让桌面运行 mp4 视频，而移动版本可以使用动画 gif。

我遇到的问题是动画 gif 是 /heavy/（~3+mb gif vs ~100kb mp4）。由于我还没有找到自动播放问题的解决方法，所以我决定暂时忍受它，但我想阻止该网站的桌面版本实际下载那些 20mb 的 gif，这是我的问题。怎么做？

AFAIK，使用 class="hidden-desktop" 仍然会下载 gif，但只是隐藏它们。有没有办法告诉浏览器简单地忽略文件？

这是 Fiddle 上的样子： https://jsfiddle.net/1aasjs23/13/

  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-interval="19000" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-interval="19000" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-interval="19000" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <!-- Item 1 -->
      <div class="item active">
        <div align="center">
          <div class="hidden-phone">
            <div class="hidden-tablet">
              <video autoplay loop>
                <source src="http://bluelotusvape.com/assets/img/future_short.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
            </div>
          </div>
          <div class="hidden-desktop">
            <img src="http://bluelotusvape.com/assets/img/future_short.gif" alt="">
          </div>
        </div>
        <div class="carousel-caption">
          <h4>First Thumbnail label</h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </div>
      <!-- Item 2 -->
      <div class="item">
        <div align="center">
          <div class="hidden-phone">
            <div class="hidden-tablet">
              <video autoplay loop>
                <source src="http://bluelotusvape.com/assets/img/vape.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
            </div>
          </div>
          <div class="hidden-desktop">
            <img src="http://bluelotusvape.com/assets/img/vape.gif" alt="">
          </div>
        </div>
        <div class="carousel-caption">
          <h4>Second Thumbnail label</h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </div>
      <!-- Item 3 -->
      <div class="item">
        <div align="center">
          <div class="hidden-phone">
            <div class="hidden-tablet">
              <video autoplay loop>
                <source src="http://bluelotusvape.com/assets/img/max.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
            </div>
          </div>
          <div class="hidden-desktop">
            <img src="http://bluelotusvape.com/assets/img/max.gif" alt="">
          </div>
        </div>
        <div class="carousel-caption">
          <h4>Third Thumbnail label</h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>

您会注意到它会同时显示 gif 和 mp4，但它不会在浏览器中执行此操作。

【问题讨论】：

欢迎来到 StackOverflow！我们很乐意提供帮助，但我们需要查看一些到目前为止您至少尝试过的代码。
谢谢，添加代码和 Fiddle 链接 :)

标签： jquery css html twitter-bootstrap carousel

【解决方案1】：

您可能可以使用 regx 测试器为桌面执行一个简单的 javascript 解决方法：

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) 
    // Show image carousel
    else
    //load video

这将加载一个或另一个。如果您想要为桌面加载图像轮播的选项，请提供链接。您也可以使用 jQuery onload 或 jQuery document ready 并将其分别包装在事件侦听器中

【讨论】：

谢谢，我不熟悉 jQuery onload 或 jQuery document ready，所以我会看看那些！