浅谈jQurey懒加载技术

Advertisement

Lazy Load是一个用JavaScript编写的jQuery插件,可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。

图片懒加载与图片预加载的处理方式正好相反。

1、懒加载的意义

如果一个页面中有成千上万张图片,如淘宝首页等,如果一上来就发送成千上万个加载图片的请求,服务器很可能会吃不消。
懒加载的意义在于:在包含很多大图片的长页面中延迟加载图片,可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态,可以帮助降低服务器负担。

2、懒加载的使用范围

涉及到图片,falsh,iframe,JS文件等占用较大带宽的资源加载时,都可以使用jQuery预加载技术。

3、懒加载的使用方法:

1) 导入lazyload插件

<script src="js/jquery.lazyload.js"></script>

2) 所有图片都延迟加载:

<script type="text/javascript">
	$("img").lazyload();
</script>

3) 设置敏感度区域

lazyload插件提供了threshold选项,将threshold定为x,表示当可视区域离图片还有200个象素时开始加载图片。

$("img").lazyload({ threshold : 200 }); 

Similar Posts:

  • JS懒加载技术lazyload

    1.前言 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首 页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网称不支持新版浏览器. 2.lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视

  • [置顶] 图片懒加载技术

    在各种门户网站中,都有大量的图片,尤其是电子商务网站,更多的产品图片,这个时候如果直接访问主页的话,会有很多的图片需要浏览器下载,特别是在网速不好的情况话,打开一个网站需要很长的时间,比如京东首页,而且在很多情况下,用户是不会看网站的每一个图片的,用户只是挑选自己感兴趣的产品,这种情况下,就会有很多的带宽浪费,还会带来不好的用好体验. 于是图片懒加载的技术就出来了,懒加载是表示只是在用户需要看指定的图片时,才会加载,比如京东首页下面的很多产品和其他tab页.只有用户拉动滚动条到页面下面时才会加载

  • 浅谈壳的加载步骤及手动脱壳(转载)

    作者:不详 文章来源:不详 更新时间:2005-8-21 现在玩脱壳的人越来越多了,不知道是好事还是坏事. 现在玩手动脱壳一般三样工具足矣:loader,ImpREC,TRW2000.也许是这三剑客的功能太强大,因此手动脱壳也变得象流水化作业.大致以下几个步骤就搞定了. 1)loader找OEP.(OEP就是程序原来的入口点,即Original Entry Point) 2)TRW2000来Dump.也就是把内存映象保存为文件. 3)ImpREC修补Import Table.(也就是修补程序原来

  • Oracle【参数文件】浅谈数据库实例加载时,参数文件优先级选择。

    前言:本实验主要是为了测试orcl数据库加载过程中,对参数文件选择的优先权.对此我们需要准备 initorcl.ora,spfileorcl.ora,init.ora,spfile.ora 四个参数文件,修改参数文件中的一个参数,以便区分每次加载的是哪个参数. 一.测试环境: (1)OS:Red Hat Enterprise Linux Server release 5.5 (2)DB:Enterprise Oracle Server 10g release 2 二.模拟准备: (1)备份 $O

  • 浅谈ios异步加载

    需求情况:在ViewDidLoad中访问数据,根据数据库返回的数据来实现tableView的datasource - (void)viewDidLoad { [LoadingView showLoadingViewWithMessage:@"数据操作中"]; NSDictionary *parameters = @{@"type":@"1"}; [FeedBackOpinionModel appPayFeedBackWithParameters:

  • jQuery 图片懒加载技术

    <!--引入以下两个js文件--> <script type="text/javascript" src="jquery-1.2.6.pack.js"> </script> <script type="text/javascript" src="jquery.lazyload.js"> </script> <!--初始化--> <script>

  • 深入懒加载

    [javascript] view plaincopy 懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 懒加载多用于图片,因为它属于流量的大头.最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉,这样图片就不会下载,然后在图片需要呈现给用户时再加上src属性. 公司内部库的懒加载正是采用这种方案.它会遍历页面中所有的图片,将其src缓存起来后删除图片的src属性

  • hibernate的优化-懒加载(lazy)

    为了进一步优化Hibernate的性能,可以使用: 延迟加载技术.管理数据抓取策略.进行缓存管理 等方面考虑来提高Hibernate的性能. 1. 延迟加载(load) 延迟加载(load)是Hibernate为提高程序执行效率而提供的一种机制,即只有真正使用该对象的数据时才会创建. 延迟加载的过程:通过代理(Proxy)机制来实现延迟加载.Hibernate从数据库获取某一个对象数据时.获取某一个对象的集合属性值时,或获取某一个对象所关联的另一个对象时,由于没有使用该对象的数据(除标识符外),

  • ViewPage Fragment 懒加载

    最近遇到这么一个问题,ViewPage+Fragment的传统布局,ABC三个Fragment,其中BC都是内嵌一个RecyclerView,异步加载item,经常遇到一个现象就是点击b的时候,a,c也请求加载了,log如下: 08-08 17:57:39.601 26333-26333/com.nuctech.tr.trapp I/SetupHardwareParameterFragment: onAttach: 08-08 17:57:39.601 26333-26333/com.nucte

  • Android插件化系列第(二)篇---动态加载技术之应用换肤

    Android系统使用了ClassLoader机制来进行Activity等组件的加载:apk被安装之后,APK文件的代码以及资源会被系统存放在固定的目录(比如/data/app/package_name/1.apk)系统在进行类加载的时候,会自动去这一个或者几个特定的路径来寻找这个类:但是系统并不知道存在于插件中的Activity组件的信息,插件可以是任意位置,甚至是网络,系统无法提前预知,因此正常情况下系统无法加载我们插件中的类:因此也没有办法创建Activity的对象,更不用谈启动组件了.这

Tags: