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心中暗自激动 ...
随机推荐
- echo中的逗号
作为一个自学PHP的小白来说,echo是用来打印字符串的,总结几种输入方式如下: $a = 'good morning'; echo $a; echo $a . 'boys'; echo " ...
- CALayer图层的基本介绍
掌握 ● CALayer的基本属性 ● CALayer和UIView的关系 ● position和anchorPoint的作⽤用 CALayer ● 在iOS中,你能看得见摸得着的东西基本上都是UIV ...
- Python 2 —— 基本数据类型及其运算
基本运算 一.数字 **表示乘方运算 12 / 3 = 4.0浮点数 12 // 3 = 4整数 二.字符串 1.表示 单行:'...'或者"..." 多行:'''...'''或者 ...
- SP_APPROVALSET_OVERTIME 插入單據
CREATE OR REPLACE PROCEDURE SP_APPROVALSET_OVERTIME(VAPPLY_NO varchar2,VAPPLYKIND_NO varchar2,VFAC_N ...
- 最常用的PHP正则表达式收集整理
最常用的PHP正则表达式收集整理 提交 我的评论 加载中 已评论 最常用的PHP正则表达式收集整理 2015-03-20 PHP100中文网 PHP100中文网 PHP100中文网 微信号 功能介绍 ...
- [MFC] 如何更改MFC程序图标
方法一: >_<:找一张ICO图标,替换programname/res/programname.ico文件,就可以啦,这时候你运行后得到的图标可能还是原来MFC的默认图标,这时候你只要把工 ...
- 轻量级实用JQuery表单验证插件：validateForm5
表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...
- Installing SCM-Manager
With SCM-Manager, people can share and manage Git, Mercurial and Subversion repositories over http e ...
- Lingo 做线性规划 - Revenue Management
Reference: <An Introduction to Management Science Quantitative Approaches to Decision Making, Rev ...
- lucene索引文件大小优化小结
http://www.cnblogs.com/LBSer/p/4068864.html 随着业务快速发展,基于lucene的索引文件zip压缩后也接近了GB量级,而保持索引文件大小为一个可以接受的范围 ...