懒惰< option>装货 [英] Lazy <option> loading

问题描述

假设我有这样的选择:

<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个元素的列表.

I should see a List of 4 elements having a scrollbar on the right.

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

What i like to do now is to load the text via ajax if the option becomes visible somehow (scrolling and/or initial).

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

At the end, I do not load them lazy because of the huge metadata transfer. This is the request I must upload (send to the server):

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

This is inacceptable for the lazy-load of single elements.

推荐答案

对我的英语不好对不起，但由于我理解了这个问题，因此可以提出以下解决方案:

I'm sorry for my bad English, but as I'm understanding this question I can present this solution:

$(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);
  });
});

链接

这篇关于懒惰< option>装货的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！