如何延遲加載任何東西

我知道能夠使用一些第三方jQuery庫來延遲加載'圖像'。是否有任何延遲加載幾乎所有像<div>元素容器，例如當用戶滾動到該<div>容器如何延遲加載任何東西

2013-01-18 cometta

看來http://stackoverflow.com/questions/8192651/load-lazy-loading-a-div-whenever-the-div-gets-visible-for-the-first的副本時間 – Ragnarokkr

簡短的回答是肯定的。較長的答案是[你有什麼嘗試？]（http://whathaveyoutried.com） –

爲了擴大對金商的（正確的）答案：

出於安全性和可維護性的原因，你應該警惕直接注射原始的HTML到文檔中。這樣做可能會中斷事件監聽器，破壞DOM解析器，並可能會泄露安全漏洞。

通常，延遲加載內容的最佳方式是將編碼數據（如JSON或XML）發送到客戶端，並相應地處理結果。對於基本的HTML，可以使用templating solution。即使是iframe也可能比將<div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div> *粘貼到元素的innerHTML更好。

此外，在爲您的網站實施延遲加載之前，請花些時間考慮是否真的值得。一個額外的HTTP請求明顯比一次下載數據更昂貴，並且通過JavaScript注入的任何HTML都不會被web搜索爬蟲看到。所以，如果你只是注入少量的靜態信息，那真的不值得麻煩。

*你能找到解析錯誤嗎？現在設想爲標準大小的HTML文檔做這件事。

來源

2013-01-18 22:23:39

爲什麼依靠一些第三方庫來幫助你延遲加載？使用原生JavaScript可以做得很好。實際上，只要您接受所有延遲加載都由某個用戶操作觸發的原則，就可以在特定對象（無論是滾動條，某個部分標題等）上設置偵聽器。設置一個依賴於AJAX的相應處理程序（您可以在這裏使用jQuery）來獲取數據（最好是HTML），您可以使用容器元素的innerHTML屬性直接將其加載到任何容器中。

來源

2013-01-18 21:44:49 kinsho

這是你真正想要開始的。這是我自己創建的一個新的jQuery插件。你可以根據你想要的任何元素（jQuery選擇器）「延遲加載」任何你想要的東西。

https://github.com/shrimpwagon/jquery-lazyloadanything

來源

2013-03-04 19:18:33 shrimpwagon

如果你的文檔中包含非圖像的例子，這可能是最好的。例如，您描述瞭如何通過data-src延遲加載圖像，但實際上並未解釋如何延遲加載div。一個div沒有data-src。 –

'data'屬性是適用於任何元素的新HTML5規範。但是，我需要製作一個頁面示例。你想爲我做嗎？ – shrimpwagon