如何使用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 data-src="./sunli/1.jpg" alt="" width="100%"></li> <li><img data-src="./sunli/2.jpg" alt="" width="100%"></li> <li><img data-src="./sunli/3.jpg" alt="" width="100%"></li> <li><img data-src="./sunli/4.jpg" alt="" width="100%"></li> <li><img data-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（"data-src"）; //设置$（this）.find（"img"）.attr（"src",src）; //做标识$（this）.attr（"isLoaded","1"）; } }） }）? //使用代码来触发滚动事件 $（window）.trigger（"scroll"）; </script></body></html>本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-06/131978.htm