防止使用CSS加載元素？

我正在使用bootstrap製作視頻輪播，並遇到了一個問題：許多移動設備無法自動播放HTML5視頻。沒問題我想，我只會使用CSS中隱藏的桌面和隱藏移動標籤，然後讓桌面運行mp4視頻，而移動版本可以使用動畫gif。防止使用CSS加載元素？

我遇到的問題是動畫gif /重/（〜3 + mb gif vs〜100kb mp4）。由於我還沒有找到自動播放問題的解決方法，我決定現在不得不忍受它，但我想阻止桌面版本的網站實際下載這些20mb的gif，這是我的問題。怎麼做？

AFAIK，使用class =「hidden-desktop」仍然會下載GIF，但只是隱藏它們。有沒有辦法告訴瀏覽器忽略這些文件？

下面是它看起來像小提琴： 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，但它不會在瀏覽器中做到這一點。

來源

2017-02-15 turqoisehex

歡迎的StackOverflow！我們很樂意提供幫助，但是我們需要查看一些您至少已經嘗試過的代碼。 – sircapsalot

謝謝，添加代碼和鏈接到小提琴:) – turqoisehex

你也許可以進行桌面像這樣使用至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的文件準備分別在事件監聽器把它包

來源

2017-02-15 04:10:21 yardpenalty

謝謝，我不熟悉jQuery onload或jQuery文檔準備好，所以我會看看那些！ – turqoisehex

防止使用CSS加載元素？

回答

相關問題