按需加载的优势：在实际调查中发现,很多的网民在游览网站时具有明确的指向性,往往在进入主页后直接搜索进入自己需要的商品列表内,如果在客户进入主页时将主页信息全部加载完毕后展示给顾客,会极大的浪费网站资源,同时也会降低客户体验度,因而按需加载则成为了当今网站构建的主流。
<!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>
以上这篇如何使用AJAX实现按需加载【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。