Lazy lade versteckten Inhalt mit Boostrap

Question

Wie kann ich den gesamten Inhalt, der in der versteckten-xs hidden-sm div enthalten ist, laden, um zu verhindern, dass Bilder und Links auf ein mobiles Gerät geladen werden?

Ich muss den gesamten Inhalt nicht nur Bilder lazy laden. Stellen Sie sich vor, dies ist für ein großes Menü mit vielen versteckten Kategorien auf dem Desktop, die nicht in mobilen angezeigt werden müssen.

<div class="row hidden-xs hidden-sm"> 
    <div class="col-md-12"> 
    <img src="http://placehold.it/800x100"> 
    <a herf="/desktop-account/">Login</a> 
    </div> 
</div> 

<div class="row hidden-md hidden-lg"> 
    <div class="col-xs-12"> 
    <img src="http://placehold.it/300x100"> 
    <a herf="/mobile-account/">Login</a> 
    </div> 
</div> 

Answer 1

können Sie den Inhalt über ajax laden. Dazu benötigen Sie eine div als Container und eine weitere Seite mit dem Inhalt, den Sie laden möchten.

Dies wäre Ihr Container auf der ersten Seite. Der Inhalt ist über, sagen wir mal, http://link/to/content

<div id="container"> 

</div> 

den Inhalt Laden kann leicht mit jquery erfolgen.

$('document').on('ready', function() { 

    if (!...) { // check for mobile device 
    $('#container').load('http://link/to/content.html') 
    } 
}