Блог

Когда прокрутка уменьшается на 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 -->
 

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 Содержит динамические данные.