jQuery 無限滾動/延遲加載

Question

我目前正在重新設計我的網站，並一直在研究使用 JavaScript 和 jQuery。 這是我到目前為止所擁有的： http : //www.tedwinder.co.uk/gallery2/ 。

我的願景是將所有照片都放在一頁上，用戶可以像現在一樣滾動瀏覽。 但是，我了解在一個頁面上擁有 50 多個大型圖像的局限性和影響，並考慮使用無限滾動和延遲加載，我理解只有當用戶到達它們時才會加載圖像，或者當他們點擊“更多”鏈接？

所以，我的問題是：這會減少頁面加載，我將如何實現無限滾動/延遲加載，這是否有效，或者您能想到任何更有效的方法嗎？

謝謝，泰德

Answer 1

這是一個很好的jQuery插件，可以處理圖像延遲加載。

http://www.appelsiini.net/projects/lazyload

折疊下方的圖像在滾動到視圖中之前不會加載。

它會減少您網站的帶寬，但如果您沒有大量流量，它不會產生太大影響。

有關使用此技術的示例，請查看http://mashable.com/

Answer 2

試試這個 jQuery Lazy Scroll Loading Plugin http://code.google.com/p/jquerylazyscrollloading/

Answer 3

你可以試試我寫的這個 jQuery 插件，它使用 html 注釋來延遲加載任何 html 的任意位，包括圖像：

jQuery 延遲加載器博客文章

jQuery Lazy Loader 插件頁面

下面是一個例子：

<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

所以基本上你用占位符標簽和內部 html 注釋包裝你想要延遲加載的內容。 當占位符在視口中可見時，它會替換為注釋中的 html 字符串。

您可以為占位符使用任何標簽，但我喜歡 pre 因為當里面只有評論時它呈現為 0 維。

希望這可以幫助！ @MW_柯林斯

Answer 4

這是另外兩個執行延遲加載/無限滾動的 JQuery 插件：

http://jscroll.com/

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/