第一:lazyLoad简介及作用

网站性能优化的插件,提高用户体验。

页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。

第二:使用场合

涉及到图片,falsh资源,iframe,网页编辑器(CK),JS文件等占用较大带宽,避免网页打开时加载过多资源,让用户等待太久。

第三:代码使用

1.导入JS插件(前提有 1.6.2.js文件)

<script src="js/jquery.lazyload.js" type="text/javascript"></script> 

2.在你的页面中加入如下:

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

所以图片都延迟加载。

3.设置敏感度区域

插件提供了 threshold 选项

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

将临界值定为 200,默认情况下,当他们出现在屏幕上时,默认的图像加载。如果要加载早期使用阈值参数的图像。设置阈值200使图像加载200像素才能显示在视口。

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

高级篇详细介绍(不想了解那么多的可以直接绕过)

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱.

怎样使用?

Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

4. 还有涉及到 高级应用,触发事件,多参数等等。详细见参考 url 参考:

加载图片 :http://www.cnblogs.com/szytwo/archive/2012/12/27/2836141.html

Lazy Load Plugin for官网: jQuery:http://www.appelsiini.net/projects/lazyload

jquery-懒加载技术(简称lazyload)的更多相关文章

  1. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  2. 抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术

    懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...

  3. Angular性能优化实践——巧用第三方组件和懒加载技术

    应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...

  4. 爬虫之图片懒加载技术及js加密

    图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...

  5. 爬虫(七)图片懒加载技术、selenium和PhantomJS

    动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...

  6. 08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS

    引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...

  7. Python网络爬虫之图片懒加载技术、selenium和PhantomJS

    引入 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.ch ...

  8. Python爬虫之图片懒加载技术、selenium和PhantomJS

    一.引入 2.概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 3.回顾 验证码处理流程 一.今日详情 动态数据加载处理 1.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素 ...

  9. 爬虫之图片懒加载技术、selenium和PhantomJS

    爬虫之图片懒加载技术.selenium和PhantomJS   图片懒加载 selenium phantomJs 谷歌无头浏览器 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http:/ ...

随机推荐

  1. Razor视图出现重复的解决方法

  2. UIViewController 生命周期

    创建: 1. alloc 创建对象,分配空间 2.init (initWithNibName) 初始化对象,初始化数据 3.loadView 从nib载入视图 ,通常这一步不需要去干涉.除非你没有使用 ...

  3. 【Win10应用开发】自定义磁贴通知的排版

    前面老周用了两篇烂文,向大家介绍了Adaptive磁贴的模板使用.那些XML模板已经很强大了,不过,如果你觉得那些排版还不足以满足需求,不妨试试自己来定义磁贴的内容. 其实,Runtime App支持 ...

  4. Unity3D移植到Windows phone8 遇到的点点滴滴

    LitJson.JsonMapper:Type.GetInterface(String)=>Type.GetInterface(String,Boolean) protobuf应位于Assets ...

  5. Delete Volume 操作 - 每天5分钟玩转 OpenStack(57)

    今天讨论 cinder 如何删除 volume . 状态为 Available 的 volume 才能够被 delete.如果 volume 当前已经 attach 到 instance,需要先 de ...

  6. 楼主,可否发一份代码给我!QQ....

    一般来说,但凡博主写一篇很赞的文章,然后贴上演示demo的图片或者结果之后,下面一定有一大堆要代码的.不论你在博客中,把算法讲得多么透彻清晰,各种流程图伪代码一清二楚:也不论你提出了任何漂亮的思路和设 ...

  7. Linux NFS 服务部署

    系统环境:Oracle Linux 5.7 服务端:192.168.1.111 客户端:192.168.1.171 一.服务端配置 二.客户端配置 一.服务端配置 1.依次启动portmap和nfs服 ...

  8. C# 将内容写入txt文档

    <1>  FileStream fs = new FileStream(@"D:\text.txt", FileMode.Append); StreamWriter s ...

  9. 1.Java基础之System对象

    毕向东老师Java基础学习笔记——System对象 今天学习Java中的System对象后,感觉这个对象对我们主要有以下几点用处. 1.获取当前操作系统版本和类型. 2.获取当前操作系统的path中的 ...

  10. [Asp.net 5] Logging-日志系统的基本架构(上)

    本节主要介绍解决方案中的Microsoft.Framework.Logging.Abstractions.Microsoft.Framework.Logging俩个工程. 这俩个工程中所有类的关系如下 ...