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 [email protected]
 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中定义的图片。

代码中还有很多逻辑没有实现,各位见谅。

时间: 2024-11-03 22:08:15

javascript - 简单实现一个图片延迟加载的jQuery插件的相关文章

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

实现一个图片懒加载插件

实现一个图片懒加载插件-转 Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制. 这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片. 一个简单的图片懒加载共涉及两个方面, 1. HTML 约定 我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-

Vue实现一个图片懒加载插件

前言 图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.direction.Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件. Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use().其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件.只需要按照约定好的规则开发就行. 用

用Canvas+Javascript FileAPI 实现一个图片剪切、滤镜处理、上传下载工具

直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区域. 上传选中的区域. 几种简单的滤镜(自己添加滤镜函数即可添加滤镜效果) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt

18、OpenCV Python 简单实现一个图片生成(类似抖音生成字母人像)

1 __author__ = "WSX" 2 import cv2 as cv 3 import numpy as np 4 5 def local_threshold(img): #局部阈值 6 gray = cv.cvtColor(img , cv.COLOR_BGR2GRAY) #首先变为灰度图 7 binary = cv.adaptiveThreshold( gray ,255 , cv.ADAPTIVE_THRESH_GAUSSIAN_C , cv.THRESH_BINARY

btFormbuilder.js 一个基于bootstrap的jquery插件,用于生成form表单

废话不多,用法和bootstraptable差不多 可以看git项目里面的代码看用法 git项目地址: https://github.com/lurktion/btFormbuilder

jquery图片延迟加载

在用户滚动页面到图片之后才进行加载,使用图片延迟加载,能有效的提高页面加载速度. 所需js插件: <script type="text/javascript" src="${path}/js/jquery.lazyload.js"></script><script type="text/javascript" src="${path}/js/jquery.lazyload.min.js">&

50个jQuery插件可将你的网站带到另一个高度

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创