如何使用javascript檢測可見（在視圖中）元素

我在瀏覽器中有一個大於實際可見區域的div（#diagram）。 #diagram最多包含1500個「盒子」（其他div元素），我想知道這1500個盒子中的哪一個實際上對用戶是真正可見的，這樣我就可以在他們進入視野時用ajax填充它們。實際上我有一些工作代碼，但是會經歷onscroll（）事件觸發的所有元素。在Chrome瀏覽器中這樣工作，但當然我的客戶必須使用惡意瀏覽器IE8，在滾動時所有元素的循環完全迫使我的應用程序癱瘓。如何使用javascript檢測可見（在視圖中）元素

是否有某種事件在元素進入視圖或任何其他選項以檢測「真實」可見性時觸發？

環境：jQuery的/ jQueryUI的（最新的），Internet Explorer 8中

在此先感謝:-)

./cj

來源

2012-09-24 CJe

據我所知，沒有比檢測滾動位置更好的方法。你能顯示你當前的代碼嗎？ – Thomas

@Thomas顯示代碼很困難 - 客戶考慮事項和所有。將不得不做很多清潔工作。基本上，我通過ajax接收大量客戶，並在js中渲染它們並使用jquery將它們附加到div。所有最低級別的div都是絕對定位的，以使它們排成一個背景網格 – CJe

參考 -

Element ‘in view’ Event Plugin

當窗口將滾動，事件將根據視口高度和scrollTop位置檢查元素的位置。

而且

Lazy Load Plugin

延遲加載是一個jQuery插件用JavaScript編寫的。它延緩了長頁面中的圖像加載。在用戶滾動到它們之前不會加載在視口之外的圖像（網頁的可見部分）

來源

2012-09-24 07:09:41 Dipak

我根本無法獲取inview事件來觸發......我有$（'。customer'）。bind（'inview'，function（event，visible ）{ alert（visible）; }）;但沒有任何反應:-(可以定位：相對干擾什麼？ – CJe

如果在渲染它們並將它們分組爲「頁面」在您的父div的[y1，y2]垂直座標之間可見的DOM div。你將有<total height of parent div>/<visible height of parent div>頁面。
您預先加載第一頁的內容，然後在每個滾動事件中檢查是否應加載下一頁框的內容。

來源

2012-09-24 07:49:34 Kniganapolke

如何使用javascript檢測可見（在視圖中）元素

回答

相關問題