按需加载的优势:在实际调查中发现,很多的网民在游览网站时具有明确的指向性,往往在进入主页后直接搜索进入自己需要的商品列表内,如果在客户进入主页时将主页信息全部加载完毕后展示给顾客,会极大的浪费网站资源,同时也会降低客户体验度,因而按需加载则成为了当今网站构建的主流;

<!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实现按需加载的更多相关文章

  1. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 关于前端本地压缩图片，兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js

    一.介绍说明主要特点: ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用. ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG. ③按需加载文 ...

  4. jQuery：实现图片按需加载的方法，当要显示内容的高度超过了页面的高度，按需加载，根据滚动条的位置来判断页面显示的内容

    实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...

  5. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. ASP.NET Ajax 客户端框架未能加载、"Sys"未定义

    在Windows Server 2003 系统上部署asp.net项目出现以下问题: IIS为6.0 导致菜单控件的图片显示不出来: WebSite:程序中的图片显示正常. 但用到ASP.net 2. ...

  7. Jquery EasyUI Treegrid按需加载子集

    项目说明,要一个有权限并且按需加载的树形列表. jeasyui网址 CSS <!--添加树状控件--> <link rel="stylesheet" type=& ...

  8. 按需加载.js .css文件

    首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...

  9. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

随机推荐

  1. 小巧方便的MVC后端验证码，供大家学习借鉴

    调用: public ActionResult Vcode()//验证码 { string code = ValidateCode.CreateRandomCode(4); ValidateCode. ...

  2. struts2进阶篇(5)

    一.OGNL简介 OGNL (Object-Graph Navigation Language)的缩写,简称对象图导航语言. OGNL表达式的特特点: >能够取对象的属性,也能调用对象的方法. ...

  3. Scala on Visual Studio Code

    Download and install Scala Download a scala installation package from here. Then install it. Linux s ...

  4. json在php中的使用之如何转换json为数组

    <?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}' ...

  5. 两种设计模式(2)==>>"单例"

    所谓“单例”: 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资 ...

  6. ahjesus sql2005+游标示例

    DECLARE @TypeId INT, @Price1 FLOAT, @Original FLOAT DECLARE my_cursor CURSOR SCROLL FOR SELECT TypeI ...

  7. 浅谈一下缓存策略以及memcached 、redis区别

    缓存策略三要素:缓存命中率   缓存更新策略  最大缓存容量.衡量一个缓存方案的好坏标准是:缓存命中率.缓存命中率越高,缓存方法设计的越好. 三者之间的关系为:当缓存到达最大的缓存容量时,会触发缓存更 ...

  8. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  9. JSON的三种解析方式

    一.什么是JSON? JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串 只不过元素会使用特定 ...

  10. centOS 安装 svnserve

    安装说明 系统环境:CentOS-6.3安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件 检查已安装版本 ? 1 2 3 4 5 6 7 8 9 1 ...