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