Question

如果您在某些wordpress博客中看到，如果博客末尾有任何图像，则只有当控件进入博客的特定部分时才会加载。类似地，在亚马逊中，产品页面中的某些部分如“查看此项目的客户也被查看”，这些详细信息仅在用户悬停到页面的该部分时通过ajax调用加载。

哪个jQuery事件可用于触发这样的ajax调用？我想在rails 3.1中实现这个功能，在rails中有一种特殊的方式来做它还是只是一个简单的js ajax调用？

Answer 1

这些细节只通过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()读取当前滚动位置。
要停止脚本加载相同的内容两次，您只需设置一个标志，当内容加载后再不加载时，我相应地编辑了代码示例。

Answer 2

您可以通过测量从文档顶部到元素顶部的距离来评估某些内容是否可见，如果该数字在窗口高度+滚动内，则可以加载项目。

此方法需要一个永远存在的父元素，但它确实考虑了灵活的文档高度。

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
}

Answer 3

你可以这样做：

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（每页加载），那么您将从元素上“加载”的数据对象中调用数据。

Answer 4

试试这个。

    var hasEntered = false;

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

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

        }
    }

如何实现像“悬停加载”功能的亚马逊？

4 个答案: