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心中暗自激动 ...
随机推荐
- 使用MyBatis Generator自动创建代码
SSM框架--使用MyBatis Generator自动创建代码 1. 目录说明 使用自动生成有很多方式,可以在eclipse中安装插件,但是以下将要介绍的这种方式我认为很轻松,最简单,不需要装插件, ...
- html写法对gzip压缩率的影响
前几天在群里看到小杜分享一篇文章,<html写法对gzip压缩率的影响>,为此我也对这点分析了一下.不知道大家有没有看过这文章,作者是来自微博懒懒交流会,其内容我这里先简述一下. Gzip ...
- oracle 锁表查询及解决、表字段查询
在进行批量对DML操作时程序竟然中断了,不再往下执行.查询一下某张表被锁住了,因此不再往下执行了 如果怀疑表被锁了,或者事务未被正常关闭,在Oracle数据库中我们可以通过以下语句进行查询获取相关信息 ...
- Dynamic CRM 2013学习笔记（四十二）流程5 - 实时/同步工作流（Workflow）用法图解
实时工作流跟插件一样,也是用事件执行管道来执行,能在pre,post或核心操作中执行.跟插件一样,不能在创建之前和删除之后执行.如果执行过程中有异常发生,会取消并回滚整个操作.实时工作流里所有的活动和 ...
- [MFC] MFC 仿 Flappy bird PC桌面版
http://www.cr173.com/ 前些日子发现朋友都在玩flappy bird这款虐心的小游戏,网上也炒得很火,于是俺也想下一个玩玩.可是矮穷挫至今还没配上高端的智能机,于是去网上搜了一下, ...
- [stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画
>_<:这里的动画是黄色矩形区域中一个模仿俯视图的起重机运作动画,一个是模仿主视图的吊钩的运动.通过改变初始Init函数中的数据b_x,b_y实现矩形区域的移动.当实时采集时要首先根据起重 ...
- 微软 PowerShell Script Explorer 满血复活，正式发布
一年前的今天,微软在其Windows PowerShell官方博客声明中止 ‘Script Explorer’ 应用程序的开发. 一年后的今天,微软为其Script Explorer注入了新的生命.一 ...
- nodeJs开发app.js解析
在 node.js 中模块分为核心模块和文件模块两种,核心模块是通过 require('xxxx') 导入的,文件模块是以 require('/xxxx') 或 require('./xxxx').r ...
- 通过JavaScript脚本实现验证码自动输入
很多网站在用户进行某次点击,比如在线购物确认购买时,会要求用户输入验证码,这在一般情况下也没啥问题,但在用户需要频繁购买或是抢购时就很讨厌了.其实网站的验证码一般是由JS脚本生成的,因此也可以通过编写 ...
- PowerManager和WakeLock的操作步骤
① PowerManager pm = (PowerManager) getSystemService(Context.POWER_SERVICE);通过 Context.getSystemServ ...