Boostrap ile tembel yükleme gizli içerik

Question

Resimlerin ve bağlantıların bir mobil aygıtta yüklenmesini önlemek için gizli-xs hidden-sm div'indeki tüm içeriği nasıl yükleyebilirim?

Sadece içeriği değil tüm içeriği tembel olarak yüklemem gerekiyor. Bunun, masaüstünde mobilde gösterilmesi gerekmeyen birçok gizli kategoriye sahip büyük bir menü için olduğunu düşünün.

<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

Sen ajax ile de içerik yükleyebilirsiniz. Bu nedenle, kapsayıcı olarak div ve yüklemek istediğiniz içeriğe sahip başka bir sayfaya ihtiyacınız vardır.

Bu ilk sayfanızdaki kapsayıcınız olur. içerik, kolayca jquery ile yapılabilir içerik yükleniyor http://link/to/content

<div id="container"> 

</div> 

, erişilebilir diyelim.

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

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