使用Boostrap懒惰加载隐藏内容

Lazy load hidden content with Boostrap

本文关键字：隐藏 加载 Boostrap 使用      更新时间：2024-06-21

如何延迟加载隐藏xs-hidden smdiv中包含的全部内容，以防止图像和链接加载到移动设备上？

我需要延迟加载整个内容，而不仅仅是图像。想象一下，这是一个大菜单，桌面上有许多隐藏的类别，不需要在手机上显示。

<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>

您可以通过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')
  }
}
相关文章：