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心中暗自激动 ...
随机推荐
- MySql自动分区
自动分区需要开启MySql中的事件调度器,可以通过如下命令查看是否开启了调度器 show variables like '%scheduler%'; 如果没开启的话通过如下指令开启 ; 1.创建一个分 ...
- 软件工程结组开发软件特色——NABC模型
特点:通过学生提前点餐,可以让摊主在准备食材的时候有个参照,当准备的食材比较少的时候可以及时回家取来. N(Need):每当放学的时候,学校外边的卖饭摊位总是挤满了人,好多同学都要排好长的队等比较长的 ...
- C语言itoa()函数和atoi()函数详解(整数转字符C实现)
1.int/float to string/array: C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串,下面列举了各函数的方法及其说明. ● itoa():将 ...
- 黑马程序员——for循环的使用与理解
Console.WriteLine("请输入要打印菱形的行数(不能是偶数)");---------------------- <a href="http://edu ...
- 解决VS2013+IE11调试DevExpress ASP.NET MVC的性能问题
将一个MVC项目从12.2升级到14.2,VS2012升到2013,发现使用IE11调试非常慢卡死,CPU占用100%,后来经过排除,发现只有DevExpress的MVC项目有这个问题. 最后在Dev ...
- 微软分布式框架Orleans开源了
开源地址: https://github.com/dotnet/orleans 昨天编译了一下,这个最新的Orleans安装程序(用github源码编译的) 下载地址:http://pan.baidu ...
- WPF快速入门系列(2)——深入解析依赖属性
一.引言 感觉最近都颓废了,好久没有学习写博文了,出于负罪感,今天强烈逼迫自己开始更新WPF系列.尽管最近看到一篇WPF技术是否老矣的文章,但是还是不能阻止我系统学习WPF.今天继续分享WPF中一个最 ...
- Asp.Net Web API 2第十一课——在Web API中使用Dependency Resolver
前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文主要来介绍在Asp.N ...
- Mvc4页面缓存设置Cookie导致缓存失效
[OutputCache(Duration = 60, VaryByParam = "none")] public ActionResult Index() ...
- C语言 数组 列优先 实现
C语言数组结构列优先顺序存储的实现 (GCC编译). 从行优先转换为列优先存储方式, 与行优先相比, 不同之处在于改变了数组维界基址的先后顺序, 从而改变了映像函数常量基址. /** * @brief ...