recherche

Maison  >  Article  >  interface Web  >  L'implémentation AJAX affiche la page avant le chargement

L'implémentation AJAX affiche la page avant le chargement

php中世界最好的语言
php中世界最好的语言original
2018-04-04 15:14:201610parcourir

Cette fois je vais vous présenter l'implémentation AJAX pour afficher la page avant le chargement, et l'implémentation AJAX pour afficher la page avant le chargement Quelles sont les précautions Voici un cas pratique, prenons. un regard.

Avantages du chargement à la demande : dans des enquêtes réelles, il a été constaté que de nombreux internautes ont des instructions claires lorsqu'ils visitent 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(){
//遍历检测里面的元素尺寸
$('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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

téléchargement de fichiers ajax + traitement compatible avec le navigateur

JS+ajax implémente la soumission de formulaires asynchrones php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php ajax JS 异步
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter l'actualisation asynchrone et l'actualisation partielle en AJAXArticle suivant：Comment implémenter l'actualisation asynchrone et l'actualisation partielle en AJAX

Articles Liés

Voir plus