Verhindern, dass Elemente mit CSS geladen werden?

Ich arbeite an einem Video-Karussell im Bootstrap und stieß auf ein Problem: Viele mobile Geräte können HTML5-Video nicht automatisch abspielen. Kein Problem, dachte ich, ich benutze nur die versteckten Desktop- und Hidden-Mobile-Tags aus dem CSS, dann lasse den Desktop das MP4-Video laufen, während die mobile Version animierte Gifs verwenden kann.Verhindern, dass Elemente mit CSS geladen werden?

Das Problem, das ich lief, ist, dass die animierten Gifs sind/schwer/(~ 3 + mb gif vs ~ 100kb mp4). Da ich keine Problemumgehung für das Autoplay-Problem gefunden habe, entschied ich, dass ich jetzt damit leben muss, aber ich möchte verhindern, dass die Desktop-Version der Website tatsächlich diese 20 MB Gifs herunterlädt, und das ist meine Frage. Wie es geht?

AFAIK, mit class = "hidden-desktop" wird immer noch die Gifs herunterladen, aber verstecken Sie sie einfach. Gibt es eine Möglichkeit, dem Browser mitzuteilen, dass er die Dateien einfach ignorieren soll?

Hier ist, wie es auf Fiddle aussieht: 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>

Sie werden feststellen, dass es zeigt sowohl die gif und das mp4, aber es funktioniert nicht in einem Browser tun.

Quelle

2017-02-15 turqoisehex

Willkommen bei Stackoverflow! Wir würden gerne helfen, aber wir müssen einen Code sehen, den Sie bisher zumindest versucht haben. – sircapsalot

Danke, hinzugefügt Code und Link zu Fiddle :) – turqoisehex

Sie können sich wahrscheinlich eine einfache Javascript Abhilfe für Desktop so etwas wie diese mit REGx Testern durchführen:

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

Dies wird das eine oder andere laden. Wenn Sie die Option zum Laden des Bildkarussells für den Desktop verwenden möchten, stellen Sie eine Verknüpfung bereit. Sie könnten auch entweder verwenden jQuery onload oder jQuery Dokument bereit und wickeln Sie es in dem Ereignis-Listener bzw.

Quelle

2017-02-15 04:10:21 yardpenalty

Danke, ich bin nicht vertraut mit jQuery onload oder jQuery Dokument bereit, so werde ich mir diese ansehen! – turqoisehex

Verhindern, dass Elemente mit CSS geladen werden?

Antwort

Verwandte Themen