我怎樣才能實現像「懸停加載」功能的亞馬遜？

-1

如果您在某些WordPress博客中看到，如果博客末尾有任何圖像，則只有當控件進入博客的特定部分時才加載。同樣，在亞馬遜，產品頁面上的某些部分就像「瀏覽此項目的用戶也瀏覽過」一樣，只有當用戶懸停到頁面的這一部分時，纔會通過ajax調用加載這些詳細信息。我怎樣才能實現像「懸停加載」功能的亞馬遜？

哪個jQuery事件可以用來觸發這樣的ajax調用？我想在rails 3.1中實現這個功能，是否有一種特殊的方式來實現它，或者它只是一個簡單的js ajax調用？

來源

2011-09-08 Rahul

試試這個。

var hasEntered = false; 

    $(window).scroll(function() { 
     if($(window).scrollTop() > $("#block-to-be-loaded").offset().top && !hasEntered){ 

      function(){ 
       $.get("URL", function(data){ 
         hasEntered = true; /*.....*/ 
        }); 
      }); 

     } 
    }

來源

2011-09-09 06:55:05 Rahul

這些細節只有在用戶懸停在頁面的該部分時纔會通過ajax調用加載。

看起來你正在尋找.mouseenter()功能：http://api.jquery.com/mouseenter/

var loaded = false; 
$(".mySection").mouseenter(
    if(!loaded){ 
    function(){ 
      $.get("URL FOR AJAX", function(data){loaded = true; /*do stuff with data*/}); 
    }); 
}

編輯：作爲一個反應到您的評論：

當然.mouseenter僅適用於該「懸停」問題的一部分。當滾動條到達文檔的某個點時加載是完全不同的事情。要做到這一點，您可以使用.scroll()函數。您必須使用$(window).scrollTop()來讀取當前滾動位置。
要停止腳本加載相同的內容兩次，您可以簡單地設置一個標誌，當內容已經加載，然後再次加載它時，我相應地編輯了代碼示例。

來源

2011-09-08 07:30:14 wosis

感謝名單，但是當鼠標控制懸停直通該節和它發生，只有當鼠標移動到特定部門，但在我剛纔提到的例子，即使在滾動條向下移動，如果會發生這種情況，每次該部分加載到瀏覽器的主視圖中，並且僅發生一次。我在尋找那種功能。 – Rahul

你可以做這樣的事情：

var success = function(data) { 
    //Show data! 
} 

$(".mySection").mouseenter(function(){ 
    var that = this, 
     data = $(this).data("loaded"); 

    // If the element has any loaded data display that, else call AJAX to get the data. 
    if($(this).data("loaded")) { 
     success(data); 
    } else { 
     $.get("URL FOR AJAX", function(data){ 
      //check if its a success AJAX response ... 

      //Run the amazon like code. 
      success(data); 

      //Save data to the element, so we dont call AJAX all the time. 
      $(that).data("loaded", data); 

     }); 
    } 
});

因此，如果您加載的AJAX一次（每個頁面加載），那麼你將在元件上「加載」數據對象調用數據。

來源

2011-09-08 08:19:59 voigtan

哇，我不知道你可以把整個功能變成變量！這是什麼巫術？「 – LocustHorde

閱讀Javascript：好的部分。有時Javascript可能是一個奇怪的小星球。 –

您可以通過測量從文檔頂部到元素頂部的距離來評估是否有可見的東西，如果該數字在窗口高度+滾動範圍內，則可以加載該項目。

對於此方法，您將需要一個永遠存在的父元素，但它確實影響了靈活的文檔高度。

var scroll = $(window).scrollTop(); 

var win_height = $(window).height(); 
var document_height = $(document).height(); 


var element_height = $(element).height(); 
var element_offset = (document_height-(win_height+scroll)); 
if(element_height-element_offset>=0){ 
    //load element contents 
}

來源

2011-09-08 08:29:25

我怎樣才能實現像「懸停加載」功能的亞馬遜？

回答

相關問題