原型“展出” Event.observe 处理程序

Question

我正在尝试发出一个 AJAX 请求，以在显示 div 时更新该 div 的内容。我最初的想法是使用事件观察器来监视要显示的 div，但我似乎找不到合适的处理程序。有没有一种简单的方法可以对“显示”的元素发出 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");
       }
});