Home > Article > Web Front-end > AJAX implementation displays the page before loading

AJAX implementation displays the page before loading

php中世界最好的语言Original: 2018-04-04 15:14:201609browse

This time I will bring you the AJAX implementation to display the page before loading, and the AJAX implementation to display the page before loading. Advantages of on-demand loading: In actual surveys, it was found that many netizens have clear direction when visiting the website. They often directly search for the product list they need after entering the homepage. If the customer enters Loading all the homepage information before displaying it to customers on the homepage will greatly waste website resources and reduce customer experience. Therefore, on-demand loading has become the mainstream of today's website construction.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按需加载图片</title>
<style type="text/css">
*{margin:0px;padding:0px;list-style:none;}
ul{
height:auto;
overflow:hidden;
width:400px;
margin:0 auto;
}
li{
width:300px;
height:200px;
border:solid 1px #ddd;
overflow:hidden;
}
</style>
</head>
<body>
<ul>
<li><img src="./sunli/1.jpg" alt="" width="100%"></li>
<li><img src="./sunli/2.jpg" alt="" width="100%"></li>
<li><img src="./sunli/3.jpg" alt="" width="100%"></li>
<li><img src="./sunli/4.jpg" alt="" width="100%"></li>
<li><img src="./sunli/5.jpg" alt="" width="100%"></li>
<li url="./rexiao.php">
 
</li>
</ul>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//绑定窗口的滚动事件
$(window).scroll(function(){
//遍历检测里面的元素尺寸
$('li[isLoaded!=1]').each(function(){
//获取滚动高度
var sT = $(window).scrollTop();
//获取窗口的可视区域的高度
var cT = $(window).height();
//获取元素距离文档顶部的偏移量
var t = $(this).offset().top;
//暂存当前元素对象
var curLi = $(this);
//检测判断
if(t <= sT + cT){
//检测是否具有url属性
var url = $(this).attr('url');
//如果有 发送ajax 获取请求之后的数据
if(url){
//发送ajax
$.get('rexiao.php',{}, function(data){
curLi.html(data);
return;
})
}
//这个时候要显示了 修改元素的src属性 
var src = $(this).find('img').attr('src');
//设置
$(this).find('img').attr('src',src);
//做标识
$(this).attr('isLoaded','1');
}
})
})
//使用代码来触发滚动事件 
$(window).trigger('scroll');
</script>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

AJAX implementation displays the page before loading

Related articles