javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书《Third-Party Javascript》很不错，推荐给大家，下载地址各位自己搜索了。
步骤：
1.打开google，鉴于google基本打不开，那么就打开这个网址吧。http://www.aol.com
2.搜索third party javascript filetype:pdf 一般都可以下载到电子书了。目前只有英文版。
这书中有一章讲到了提高app的效率，其中有一点就是延迟加载初始化不需要的资源，结合书中给出的部分代码，我这里简单的弄了一个jQuery的插件。
首先是js代码jquery.lazyloading.js。
1 /**
2 * @author huangjacky
3 * @date 2014-10-14
4 * @version 1.0
5 * @email huangjacky@163.com
6 * @description
7 */
8 'use strict';
9 (function ($) {
10 $.fn.extend({
11 lazyloading: function (opt) {
12 var defaults = {
13 delay: 0
14 };
15 var self = this;
16 var options = $.extend(defaults, opt);
17 var getWindowInfo = function () {
18 if ("pageYOffset" in window) {
19 return {
20 x: window.pageXOffset,
21 y: window.pageYOffset,
22 w: window.innerWidth,
23 h: window.innerHeight
24 }
25 } else {
26 var el = document.documentElement;
27 return {
28 x: el.scrollLeft,
29 y: el.scrollTop,
30 w: el.clientWidth,
31 h: el.clientHeight
32 }
33 }
34
35 };
36 var check = function () {
37 var t = getWindowInfo();
38 self.each(function (idx) {
39 var $this = $(this);
40 var left = 0;
41 var top = 0;
42 var el = this;
43 while (el && el.offsetParent) {
44 left += el.offsetLeft;
45 top += el.offsetTop;
46 el = el.offsetParent;
47 }
48 if (
49 left > t.x && left < t.x + t.w &&
50 top > t.y && top < t.y + t.h
51 ) {//开始正式加载
52 var href = $this.data("href");
53 if ($this.is("img")) {
54 if (options.delay > 0) {
55 setTimeout(function () {
56 $this.attr("src", href);
57 }, options.delay);
58 } else {
59 $this.attr("src", href);
60 }
61 } else if ($this.is("div")) {
62 if (options.delay > 0) {
63 setTimeout(function () {
64 $this.load(href);
65 }, options.delay);
66 } else {
67 $this.load(href);
68 }
69 }
70 }
71 });
72 };
73 $(window).on("scroll", function (evt) {
74 check();
75 });
76 check();
77 }
78 });
79 })(jQuery);
JS的代码并不难，主要是绑定window的onScroll事件，然后遍历判断所选择的元素是否在界面范围内。
接下来看看怎么使用，lazy.html的代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="js/jquery-2.1.0.js"></script>
7 <script src="js/jquery.lazyloading.js"></script>
8 <style>
9 .my-block {
10 height: 500px;
11 width: 100%;
12 }
13
14 .red {
15 background-color: red;
16 }
17
18 .blue {
19 background-color: blue;
20 }
21
22 img {
23 width: 100px;
24 height: 100px;
25 border: 1px solid red;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="my-block red"></div>
31 <div class="my-block blue"></div>
32 <div class="my-block red"></div>
33 <img src="#" data-href="images/logo.png">
34 <script>
35 $("img").lazyloading();
36 </script>
37 </body>
38 </html>
是不是很简单？这样图片默认显示src的内容，只有滚动到它的时候才会显示data-href中定义的图片。
代码中还有很多逻辑没有实现，各位见谅。
javascript - 简单实现一个图片延迟加载的jQuery插件的更多相关文章
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- 设计一种前端数据延迟加载的jQuery插件(2)
背景 最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示. 好处显而易见,可以减少前端对于图片的Http请求, ...
- 图片上传jQuery插件（兼容IE8）
图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg html <!DOCTYPE html> <ht ...
- javascript：查看一个图片是否加载完成
查看一个图片是否加载完成:<img id="img1" src="http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg" ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
随机推荐
- Maven项目配置不接文件名
1.更改finalName为ROOT,在pom.xml中加入下边的build,是可以进行自动启动Tomcat. 2.删除webapps目录下的ROOT文件夹 3.进行maven项目的deploy 4. ...
- Linq to sql 语法方法示例
联表查询,判断追加条件,对集合分页 ) { var data = from m in _db.AppArticleComment join o in _db.AppArticle on m.Artic ...
- tomee 第一个 远程调用 Session Bean
参考文档 http://tomee.apache.org/ http://download.oracle.com/otndocs/jcp/ejb-3.1-pfd-oth-JSpec/ http://d ...
- WPF 虚拟键盘
之前做了一款WPF虚拟键盘,调用Win32的API,可以模拟键盘事件. 现将代码分享如下: 按键布局如下: <Button Name="> <StackPanel Orie ...
- pgsql 常用的命令
pgsql 常用的命令:1. 创建数据库create database name with owner username; 2. 创建用户create role with createdb ;crea ...
- 数据库知识整理<一>
关系型数据库知识整理: 一,关系型数据库管理系统简介: 1.1使用数据库的原因: 降低存储数据的冗余度 提高数据的一致性 可以建立数据库所遵循的标准 储存数据可以共享 便于维护数据的完整性 能够实现数 ...
- java的四种引用，强弱软虚
1.利用软引用和弱引用解决OOM问题:用一个HashMap来保存图片的路径和相应图片对象关联的软引用之间的映射关系,在内存不足时,JVM会自动回收这些缓存图片对象所占用的空间,从而有效地避免了OOM的 ...
- Python 拷贝对象（深拷贝deepcopy与浅拷贝copy）
1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deepcopy 深拷贝 拷贝对象及其子对象 一个很好的例子: # -*-coding:utf-8 -*- ...
- Dynamic CRM 2013学习笔记（三十三）自定义审批流4 - 规则节点 -有分支的流程处理
上次介绍过节点的基本配置<Dynamic CRM 2013学习笔记(三十二)自定义审批流3 - 节点及实体配置>,这次介绍下规则节点,因为有时流程里会有一些分支.合并,这时就要用到规则节点 ...
- 转：DataTable的Compute方法的应用
转自:http://www.cnblogs.com/hfliyi/archive/2013/01/08/2851944.html 项目中遇到计算平均值.标准偏差.平均值+标准偏差.平均值+2倍标准偏差 ...