原型'显示'Event.observe处理程序

Question

我试图做一个AJAX请求，更新div的内容，当该div显示。我最初的想法是使用一个观察div来显示的Event观察者，但我似乎无法找到合适的处理程序。是否有一种简单的方法可以为展示中的元素提出AJAX请求？

Answer 1

通过“显示”我假设你的意思是在浏览器视口内可见。在这种情况下，您需要检查一个元素是否在视口内，然后观察任何会改变它的东西。

这是用于检查基本的功能元素是否视区内：

function withinViewport(el) { 
    var elOffset = $(el).cumulativeOffset(el); 
    vpOffset = document.viewport.getScrollOffsets(); 
    elDim = $(el).getDimensions(); 
    vpDim = document.viewport.getDimensions(); 
    if (elOffset[1] + elDim.height < vpOffset[1] || elOffset[1] > vpOffset[1] + vpDim.height || 
     elOffset[0] + elDim.width < vpOffset[0] || elOffset[0] > vpOffset[0] + vpDim.width) { 
     return false; 
    } 
    return true; 
} 

然后，您可以 - 例如 - 遵守滚动事件来检查元素已进入视图

Event.observe(window, 'scroll', function() { 
     if(withinViewport('element')){ 
      new Ajax.Updater("element","script.php"); 
     } 
});