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

<!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. 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker

    [源码下载] 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 作者:webabcd 介绍重新想象 Windows 8.1 ...

  2. Run python as a daemon process

    I am using `&`: why isn't the process running in the background?     No problem. We won't show y ...

  3. Unity中启动VS时出现"Visual Studio 2010 Shell 无效的许可证数据"的解决办法

    (感觉还是cnblog好一点,刚注册成功赶紧把baidu hi的一篇文章搬过来试试) 一直用着Visual Studio 2013给Unity写代码,安装了SQL Server 2014后,在Unit ...

  4. Python正则表达式模块（re模块）

    Python是我接触到的第一门编程语言,虽然它足够简单,但是对于当时刚刚接触编程语言的我来说还是有些难度的,于是只是了解了一些Python的基本语法,稍微深入一点的地方都没怎么了解.不过,到现在为止, ...

  5. 一个SpringMVC简单Demo中出现的错误

    最近在学springmvc 一个简答的Springmvc配置包括如下步骤: 1.在 web.xml 文件中配置 DispatcherServlet (该中央控制器相当于 MVC 模式中的 C),还可以 ...

  6. memcache与memcached扩展的区别

    一.服务端 之前理解错误了.服务端只有一个memcache,一般把服务端称作memcached(带d),是因为守护进程的名称就是叫做memcached(一个这样的执行程序文件). 编写的语言:c语言 ...

  7. Windows工作集内存

    Windows任务管理器默认情况下,“内存(私人工作集)”列处于选中状态. 私人工作集是工作集的一个子集,它是描述每个进程所使用的内存数量的技术术语.私人工作集专门描述了某个进程正在使用的且无法与其他 ...

  8. play framework学习笔记之 模板引擎

    模板语法 ${client.name} ${client?.name} 不能确定client是否存在的时候? #{extends /} #{doLayout /}#{get} #{set} 比如 #{ ...

  9. 说反话（c++实现）

    描述:给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小写有 ...

  10. Java中字节流和字符流的比较（转）

    字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢? 实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作的,而字符流在操作时使用了缓冲区,通过缓冲区再操 ...