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

<!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 (76) - 新增控件: SearchBox

    [源码下载] 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之 ...

  2. Free Slideshow, Gallery And Lightboxes Scripts

    http://bootstraphelpers.codeplex.com/SourceControl/list/changesets https://github.com/gordon-matt/Bo ...

  3. 容器--ArrayList

    一.前言 作为List的重要实现之一,ArrayList已经成了我们编写程序时不可或缺的重要容器之一,面试的时候也经常会被问到,所以,深入理解其实现机制,无论是对于我们正确使用这个类来说,还是准备面试 ...

  4. ajax跨子域请求的两种现代方法

    因为面向互联网的性质,我们公司的大部分系统都采用多子域的方式进行开发和部署,以达到松耦合和分布式的目的,因此子系统间的交互不可避免.虽然通过后台的rpc框架解决了大部分的交互问题,但有些情况下,前端直 ...

  5. mysql并发insert deadlock分析以及解决，无delete/update/for update

    关于并发insert操作发生deadlock这个情况,一直有很多争议,而且网上的帖子所有的例证和模拟其实不一定反映了真实的情况,例如:https://www.percona.com/blog/2012 ...

  6. [Xamarin.iOS] Visual Studio中Xamarin.iOS项目，无法加入PCL项目参考、NuGet组件参考

    [Xamarin.iOS] Visual Studio中Xamarin.iOS项目,无法加入PCL项目参考.NuGet组件参考 解决方案 目前Visual Studio中最新版本的Xamarin.iO ...

  7. jQuery coveringBad 效果对比

    Covering-Bad 是一个可拉动大小的元素,覆盖在原有的元素上面,从而两者进行对比. 在线实例 实例演示1    实例演示2 使用方法 <div class="covered&q ...

  8. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  9. 如何在Eclipse卸载之前添加的android 的 ADT

    Android开发环境配置中,怎么卸载ADT? 在Android开发环境配置中,可能会遇到很多问题,其中ADT安装失败需要卸载,怎么卸载呢?下面讲一种方法,希望能够对你有所帮助. 我采用的是Eclip ...

  10. 浅谈iOS中的单例模式

    iOS中的单例模式     就我本身理解而言,我认为的单例:单例在整个工程中,就相当于一个全局变量,就是不论在哪里需要用到这个类的实例变量,都可以通过单例方法来取得,而且一旦你创建了一个单例类,不论你 ...