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心中暗自激动 ...
随机推荐
- 【转】require.js学习笔记(二)
require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...
- Windows® 10 Mobile Technical Preview升级方法
就在今天凌晨,微软放出了Windows 10 Mobile Technical Preview的升级,喜欢吃螃蟹的人总是希望可以在第一时间尝试新的系统,我也不例外. 本次升级涵盖了从Lumia 520 ...
- UITableView动态存放、重用机制
一.UITableView动态存放 #import "ViewController.h"@interface ViewController ()<UITableViewDel ...
- lsof 简介
lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协议 ...
- HTML锁定Table中某一列
1. 2. 3. function ChangeTable() { var type = document.getElementById("ddl_ReportType").val ...
- Vmware Vsphere WebService SDK开发（第一讲）-基本知识学习
刚开始这方面开发的时候,不知道如何下手,能够查到的资料特别少,而且看到很多网友和我一样也在找这方面的资料.接下来的一段时间我就结合自己所参与的项目,完成关于Vmware Vsphere WebServ ...
- 2014 年 20 款最好的 CSS 工具
说到 WEB 设计,不得不介绍介绍 CSS 工具,CSS 工具在这里面扮演很重要的角色,可以简化无数开发者和设计师的工作,写出更好的 CSS 代码. 而网上有非常多的 CSS 工具,帮助设计师和开发者 ...
- Bug Tracker 使用笔记（有图有真相）
目的:管理Bug,完善业务流程. 前提条件:BugTracker是基于IIS和SQL Server和Asp.Net的.相当于一个Web端的管理系统. 1.下载地址 http://sourceforge ...
- C#修改文件权限
用户名的格式为:Local MachineName\AccountName 机器名可通过System.Environment.MachineName获取. 获取一个文件的权限(帐号)列表 FileSe ...
- [云] 1、云服务器——从ILP\DLP\TLP谈起
1) ABOUT:ILP\DLP\TLP 1-1.ILP 大约在1985年之后的所有处理器都使用流水线来重叠指令的执行过,以提高性能.由于指令可以并行执行,所以指令之间可能实现这种重叠称为指令级并行( ...