懒惰的<option>加载

Question

假设我有这样的选择:

<select size="4">
  <option id="1">Please wait ...</option>
  <option id="2">Please wait ...</option>
  <option id="3">Please wait ...</option>
  <option id="4">Please wait ...</option>
  <option id="5">Please wait ...</option>
</select>

我应该看到一个包含右侧滚动条的4个元素的列表.

我现在要做的是如果选项以某种方式变得可见(滚动和/或初始化),则通过ajax加载文本.

编辑:

最后,由于巨大的元数据传输,我不会加载它们.这是我必须上传的请求(发送到服务器):

这对于单个元素的延迟加载是不可接受的.

Answer 1

很抱歉我的英语不好，但是由于我了解了这个问题，因此可以提出以下解决方案：

$(document).ready(function(){
  $('select').on('scroll', function(){
    var sel = $(this);
    var lasto = sel.find('option:last');
    var s = sel.position().top + sel.height();
    var o = lasto.height() + lasto.position().top - 4;
    setTimeout(function(){
      if(o < s){console.log('We need AJAX!');}
    }, 2200);
  });
});

链接

Answer 2

您可以将元素/选项传递给下面的函数来检查元素是否可见并执行 AJAX 函数调用。

function isVisible(element) {
  var bx = element.getBoundingClientRect();
  var viewh = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(bx.bottom < 0 || bx.top - viewHeight >= 0);
}

执行会像

if(isVisible(document.getElementById("select_id")))
{
/* Execute your ajax call here */
}