原型'顯示'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"); 
     } 
});