懶惰加載博客文章

延遲加載意味着你不會加載內容，直到用戶到達那裏;你腦海中似乎有某種「懶惰的表現」。這個想法是一樣的，你可以使用Waypoints並使用'$ x.show（）'而不是'$ x.load（）'。（就我個人而言，我寧願使用某種傳呼機，這對用戶來說似乎更容易理解。） – Tgr 2012-08-15 12:45:21

非常感謝我們使用這一款，它運行良好 – 2012-08-29 15:11:01

http://archive.plugins.jquery.com/project/lazyload是懶加載pliugins的列表，但它更多的加載圖像。

你可以嘗試什麼是有隱藏除了前三個每個博客帖子元素，然後在

來源

2012-08-13 09:51:43 jpalala

對不起，我需要能夠延遲加載div的基於他們的位置，至少我認爲這是解決方案。你知道懶惰負載能夠加載的不僅僅是圖像嗎？ – 2012-08-15 09:52:55

我不知道你的設置是怎樣的，但我會建議使用jQuery來找出從頁面頂部的距離，這將是：

var scrollTop  = $(window).scrollTop(), 
    elementOffset = $('#my-element').offset().top, 
    distance  = (elementOffset - scrollTop);

按照這個堆棧溢出職位：Determine distance from the top of a div to top of window with javascript

通過在每個頁面上放置編號的ID或名稱（我認爲該頁面是PHP生成的），將它應用到你的第25篇文章中。

然後當距離達到一定數量時使用ajax加載更多博客文章。

編輯：您可以使用jQuery大於隱藏起來：

$(".element-class:gt(24)").css("display","none");

文檔瀏覽：http://api.jquery.com/gt-selector/

然後只是如果你滾過一定的滾動頂部，只需將

$("visible-element").css("display","block")

編輯2：嘗試此FIDDLE - http://jsfiddle.net/addiktedDesign/KjNnY/

來源

2012-08-19 12:34:31 AddiktedDesign

我已經嘗試獲取元素的頂部並在視口中顯示內容時，內容可能只是隱藏或從ajax調用加載。試試這個代碼。你可以用靈敏度變實驗，看看什麼對你最好的作品：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var processScroll = true; 
     var sensitivity = 10; 
     function handleScroll() 
     { 
      if (processScroll) { 
       processScroll = false; 
       topHidden = $('.block_hidden:first').offset().top; 
       if(($(window).scrollTop() + $(window).height()) > (topHidden + sensitivity)) 
       { 
        console.log('show now'); 
        $('.block_hidden:first').removeClass('block_hidden').addClass('block'); 
       } 
      } 

      processScroll = true; 
     } 

     $(document).ready(function() 
     { 
      $(window).scroll(handleScroll); 
     }); 
    </script> 

    <style> 
     .block_hidden{ 
      width:300px; 
      background: green; 
      margin:5px; 
      visibility: hidden; 
      height: 10px !important; 
     } 

     .block{ 
      height: 200px; 
      width:300px; 
      background: green; 
      margin:5px; 
     } 
    </style> 

</head> 
<body> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block_hidden"></div> 
    <div class="block_hidden"></div> 
    <div class="block_hidden"></div> 
    <div class="block_hidden"></div> 
    <div class="block_hidden"></div> 
    <div class="block_hidden"></div> 
</body> 
</html>

來源

2012-08-21 17:16:58 Rohit

你問延遲加載。

那麼答案必須包括一個服務器端。你的問題沒有說明你正在使用什麼類型的服務器端語言。在我的答案中，我將使用一些基本的PHP代碼來模擬隨機博客帖子。

延遲加載意味着我們只加載用戶可以看到的內容，然後在需要時加載更多數據。

加載數據意味着 - 從服務器請求它。這通常涉及AJAX但不一定。（儘管你可能會使用AJAX）。 JQuery有一個很棒的ajax interface。

最大的問題是 - 什麼應該觸發我的下一個負載 - 因此所有的插件。

我接受了Tgr的建議並實施了一個帶有航點的延遲加載。我甚至使用waypoint tutorial for lazy loading作爲Tgr建議（請給予Tgr更多分數）。

你可以看到我在my site

我做了什麼是模擬的博客文章不斷變化的標題實現。每次用戶滾動足夠的時間，我都會從服務器獲取更多帖子。

我爲我的源添加了一個下載鏈接，所以你可以下載並開始玩它。只需運行main.html，你就可以走了。

文件more_posts.php生成帶有隨機標題的lorem ipsum帖子。（我需要一些假內容在頁面上滾動）。

它看起來像這樣

<h1> This is post number <?php echo uniqid("",true)?> </h1> 

<div style="color:red"> 
Lorem ipsum dolor .... Quisque ut pretium nibh. 
</div> 

<div style="color:blue"> 
Lorem ipsum dolor .... Quisque ut pretium nibh. 
</div>

正如你所看到的唯一的PHP代碼我是添加一些隨機的稱號。

這應該看起來很熟悉，因爲您的博客中已經有超過25篇文章。

真正的邏輯在於main.html - HTML部分看起來像這樣

<section id="container"> 

    </section> 

    <footer> 
     <nav> 
      <ul> 
       <!-- Hijack this link for the infinite scroll --> 
       <li class="more"><a href="more_posts.php" title="Traditional navigation link">Next Page</a></li> 
      </ul> 
     </nav> 
    </footer>

的想法是你有section包含前幾帖 - 並給你一些滾動的頁面上。在底部，您在footer內有一個more鏈接，即禁用JavaScript時應該充當常規的「下一個」鏈接。

Waypoint使用此鏈接觸發下一次加載。每當鏈接即將顯示在屏幕上時，我們將使用ajax自動獲取下一篇文章。

所以JavaScript的部分看起來像這樣：

$(document).ready(function() { 

    function loadMorePosts(callback){ 
     $.get($('.more a').attr('href'), function(data) { 
       $('#container').append($(data)); 
       if (typeof(callback) == "function"){ callback(); } 
     }) 
    } 
    loadMorePosts(); 

    var $footer = $('footer'); 
    var opts = { 
     offset: '100%' 
    }; 

    $footer.waypoint(function(event, direction) { 
         $footer.waypoint('remove'); 
         loadMorePosts(function(){ $footer.waypoint(opts);}); 


      }, opts); 
});

功能loadMorePosts調用方法$.get這是$.ajax({type:'GET' .. })一個簡單的語法。它使用與鏈接的href屬性具有相同的URL。在我的例子中，href屬性指向「more_posts.php」。

當我的演示加載時，內容完全是空的，所以我繼續前進並獲取我想要顯示的第一篇文章。然後，我告訴航點聽取頁腳 - 每當頁腳靠近時，我會去找更多的帖子。

有一個棘手的部分，我做$footer.waypoint('remove')並傳遞到callbackloadMorePosts結合航點再次頁腳。這僅僅是一個技術性問題 - 航點需要你刪除的觸發器，而你獲取更多的HTML，其他的頁面可能充當搞笑..

這是或多或少的..

我試圖使這個簡單儘可能，但是在一個答案中涵蓋一個巨大的問題。因此，讓我知道我是否可以做更多的事情來清理事情。

來源

2012-08-21 20:29:30

對不起，我無法訪問服務器腳本，但航點解決方案是我們一起去了，它運作良好。非常感謝所有的答案。 – 2012-08-29 15:12:21

懶惰加載博客文章

回答

相關問題