码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2014-10-15 03:01:49      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:des   style   http   color   io   os   使用   ar   java   

最近在看一本书《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插件

标签:des   style   http   color   io   os   使用   ar   java   

原文地址:http://www.cnblogs.com/huangjacky/p/4025489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!