如何使用AJAX实现按需加载【推荐】
按需加载的优势:在实际调查中发现,很多的网民在游览网站时具有明确的指向性,往往在进入主页后直接搜索进入自己需要的商品列表内,如果在客户进入主页时将主页信息全部加载完毕后展示给顾客,会极大的浪费网站资源,同时也会降低客户体验度,因而按需加载则成为了当今网站构建的主流。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>按需加载图片</title> <styletype="text/css"> *{margin:0px;padding:0px;list-style:none;} ul{ height:auto; overflow:hidden; width:400px; margin:0auto; } li{ width:300px; height:200px; border:solid1px#ddd; overflow:hidden; } </style> </head> <body> <ul> <li><imgdata-src="./sunli/1.jpg"alt=""width="100%"></li> <li><imgdata-src="./sunli/2.jpg"alt=""width="100%"></li> <li><imgdata-src="./sunli/3.jpg"alt=""width="100%"></li> <li><imgdata-src="./sunli/4.jpg"alt=""width="100%"></li> <li><imgdata-src="./sunli/5.jpg"alt=""width="100%"></li> <liurl="./rexiao.php"> </li> </ul> <scripttype="text/javascript"src="jquery-1.8.3.min.js"></script> <scripttype="text/javascript"> //绑定窗口的滚动事件 $(window).scroll(function(){ //遍历检测里面的元素尺寸 $('li[isLoaded!=1]').each(function(){ //获取滚动高度 varsT=$(window).scrollTop(); //获取窗口的可视区域的高度 varcT=$(window).height(); //获取元素距离文档顶部的偏移量 vart=$(this).offset().top; //暂存当前元素对象 varcurLi=$(this); //检测判断 if(t<=sT+cT){ //检测是否具有url属性 varurl=$(this).attr('url'); //如果有发送ajax获取请求之后的数据 if(url){ //发送ajax $.get('rexiao.php',{},function(data){ curLi.html(data); return; }) } //这个时候要显示了修改元素的src属性 varsrc=$(this).find('img').attr('data-src'); //设置 $(this).find('img').attr('src',src); //做标识 $(this).attr('isLoaded','1'); } }) }) //使用代码来触发滚动事件 $(window).trigger('scroll'); </script> </body> </html>
以上这篇如何使用AJAX实现按需加载【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。