AJAX를 사용하여 주문형 로딩을 구현하는 방법은 무엇입니까? 다음으로 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>
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Ajax 기술 기반 진행률 표시줄을 사용하여 파일 업로드 구현
Ajax의 ReadyState 및 상태와 관련된 문제 논의
$.Ajax() 메소드 매개변수에 대한 종합 분석(그래픽 튜토리얼) )
위 내용은 AJAX를 사용하여 주문형 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!