이번에는 AJAX를 구현하고 페이지가 표시된 후 로드되는 노트가 무엇인지 소개하겠습니다. 다음은 실제 사례입니다.
주문형 로딩의 장점: 실제 설문조사를 통해 많은 네티즌들이 웹사이트 방문 시 방향성이 명확한 것으로 나타났습니다. 고객이 홈페이지에 진입한 후 필요한 상품 목록을 직접 검색하는 경우가 많습니다. 로드된 후 고객에게 모든 정보를 표시하는 것은 웹사이트 자원을 크게 낭비하고 고객 경험을 감소시키게 됩니다. 따라서 주문형 로딩이 오늘날 웹사이트 구축의 주류가 되었습니다.
<!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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 AJAX 구현은 로드하기 전에 페이지를 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!