Как я могу достичь амазонка, как "зависать при загрузке" функциональность?

Question

Если вы видите в определенных блогах WordPress, если есть какие-либо изображения в конце блога, он загружается только тогда, когда элемент управления попадает в этот конкретный раздел блога. Точно так же в Amazon есть некоторые разделы на странице продукта, такие как «Клиенты, просмотревшие этот элемент, также просматривающие», эти данные загружаются через вызов 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*/});
    });
}

РЕДАКТИРОВАТЬ: В качестве реакции на ваш комментарий:

1. .mouseenter, конечно, работает только для "зависания" части вопроса.Загрузка, когда полоса прокрутки достигает определенной точки документа, - это совсем другое.Для этого вы можете использовать функцию .scroll().Вам нужно прочитать текущую позицию прокрутки, используя $(window).scrollTop().
2. Чтобы остановить скрипт от двойной загрузки одного и того же контента, вы можете просто установить флаг, когда контент загружен, а затем не загружать его сноваЯ отредактировал пример кода соответственно.

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 hasEntered = false;

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

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

        }
    }

Answer 4

вы могли бы сделать что-то вроде этого:

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 один раз (для каждой загрузки страницы), то вы будете вызывать данные из объекта данных «загружены» в элемент.