javascript - 使用引导程序 3 防止 jquery 以小分辨率运行？

Question

我有一个 div 块，使用 twitter bootstrap 为较大的设备显示。这个 div 块有一个关联的调用，一旦页面准备好就检索数据。当页面以较小的分辨率（如移动设备）显示时，我试图避免进行此 jquery 调用。

我的 HTML 看起来像这样：

<div class="row">
<div class="col-sm-12 hidden-xs hidden-sm">
        <div id="test"></div>
    </div>
</div>

jquery 事件如下所示：

<script type="text/javascript">

    $(document).ready(function() {

           getData();

           function getData() {

               $.post("functions/test_function.php", {f: 'getData'}, function(data) {

                   if (data.success) {   
                       $('#test').html(data.records);
                   }            
               }, "json");
           }
    });

</script>

如果页面是在较小的设备上打开的，这样 div 是隐藏的，我怎样才能避免调用我的 getData 函数？我是否需要通过 javascript /jquery 检查当前分辨率，或者引导程序是否有类似这样的钩子？

Answer 1

你可以这样做：

if( $('#myDiv:visible').length){
   /* do ajax*/
}

将检查大小排除在外，让媒体查询处理所有这些

Answer 2

您可以使用modernizr来检查媒体查询：

if (Modernizr.mq("screen and (min-width:950px)"))

因此，在应该执行 js 部分的位置填写您想要的断点：

$(document).ready(function() {

  if (Modernizr.mq("screen and (min-width:950px)")) {
   getData();
  }

   function getData() {
    $.post("functions/test_function.php", {f: 'getData'}, function(data) {
     if (data.success) {   
      $('#test').html(data.records);
     }            
    }, "json");
   }
});

Answer 3

先检查div是否显示

$("#test").parent("div").css('display') != 'none'

如果显示，则调用该函数。