Question

如何延迟加载hidden-xs hidden-sm div中包含的全部内容，以防止图片和链接在移动设备上加载？

我需要延迟加载整个内容而不仅仅是图片。想象一下，这是一个大型菜单，桌面上有许多隐藏的类别，无需在移动设备中显示。

<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

您可以通过ajax加载内容。因此，您需要一个div作为容器，另一个页面包含您要加载的内容。

这将是您在第一页上的容器。可以通过http://link/to/content

访问内容

<div id="container">

</div>

使用jquery可以轻松加载内容。

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

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

使用Boostrap延迟加载隐藏内容

1 个答案: