向下滚动30%或到达特定位置时 您要在指定位置插入html文档。
下面是当滚动大约30%且要插入html时运行的ajax。
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>
我想知道您是否可以使用上述的ajax更快地拨打number_1.html和number_2.html。
或者,我们可以依次调用number_1.html> number_2.html吗?
注意:number_1.html,number_2.html包含动态数据。