Используя ajax вставьте html в указанную позицию - PullRequest
0 голосов
/ 14 апреля 2019

Когда прокрутка снижается на 30% или когда достигается определенная позиция Вы хотите вставить HTML-документ в указанное место.

Ниже представлен ajax, который запускается, когда прокрутка составляет около 30%, и HTML должен быть вставлен.

HTML

<!-- Number 1 -->
    <div class="anyDiv off" data-ajax="/html/ajax/number_1.html"></div>
<!-- //Number 1 -->

<!-- Number 2 -->
    <div class="anyDiv off" data-ajax="/html/ajax/number_2.html"></div>
<!-- //Number 2 -->

1008 * Javascript *

$(function(){
  $(window).scroll(function(e){
    var bodyHeight = $('body').height();
    var scrollTop = $(this).scrollTop()+$(window).height();
    var per = Math.ceil((scrollTop/bodyHeight)*100);

    if( per >= 30 ){
      $('.anyDiv.off').each(function(){
        var pop_ax = $(this);
        var load_url = $(this).data('ajax');

        $(this).removeClass('off');

        $.ajax({
          url:load_url,
          type:'get',
          dataType : 'html',
          success:function(data){
            pop_ax.append($("<div class='remove'/>").html(data).find('.loadhtml').html());
          }
        });

        return false;
      });
    }
    return false;
  });
});

[number_1.html]

<div class="loadhtml">
    <div ax="main">
        <div class="bg-grey">            
            <h2 class="main-letter"><strong>#Number1</strong></h2>
        </div>
    </div>
</div>

[number_2.html]

<div class="loadhtml">
    <div ax="main">
        <div class="bg-grey">            
            <h2 class="main-letter"><strong>#Number2</strong></h2>
        </div>
    </div>
</div>

Интересно, можно ли быстрее вызывать number_1.html и number_2.html с помощью ajax, как указано выше.

Или, мы можем последовательно вызвать number_1.html> number_2.html последовательно?

Примечание: number_1.html, number_2.html Содержит динамические данные.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...