Maison >interface Web >js tutoriel >Comment utiliser AJAX pour implémenter le chargement à la demande

Comment utiliser AJAX pour implémenter le chargement à la demande

亚连original: 2018-05-24 09:53:171414parcourir

Comment utiliser AJAX pour implémenter le chargement à la demande ? Ensuite, je vais vous proposer un article sur la façon d'utiliser AJAX pour implémenter le chargement à la demande [recommandé]. Je pense que c’est plutôt bien, alors j’aimerais le partager avec vous maintenant et le donner comme référence.

Avantages du chargement à la demande : dans des enquêtes réelles, il a été constaté que de nombreux internautes ont une direction claire lorsqu'ils parcourent le site Web. Ils recherchent souvent directement la liste de produits dont ils ont besoin après avoir accédé à la page d'accueil. Charger toutes les informations de la page d'accueil, puis les afficher aux clients sur la page d'accueil gaspillera considérablement les ressources du site Web et réduira l'expérience client. Par conséquent, le chargement à la demande est devenu le courant dominant de la construction de sites Web d'aujourd'hui.

<!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(){

//遍历检测里面的元素尺寸

$(&#39;li[isLoaded!=1]&#39;).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(&#39;url&#39;);

//如果有 发送ajax 获取请求之后的数据

if(url){

//发送ajax

$.get(&#39;rexiao.php&#39;,{}, function(data){

curLi.html(data);

return;

})

}

//这个时候要显示了 修改元素的src属性 

var src = $(this).find(&#39;img&#39;).attr(&#39;src&#39;);

//设置

$(this).find(&#39;img&#39;).attr(&#39;src&#39;,src);

//做标识

$(this).attr(&#39;isLoaded&#39;,&#39;1&#39;);

}

})

})



//使用代码来触发滚动事件 

$(window).trigger(&#39;scroll&#39;);

</script>

</body>

</html>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus