javascript - 簡單實現一個圖片延遲加載的jQuery插件

時間 2019-11-06

標籤 javascript 簡單實現一個圖片延遲加載 jquery 插件欄目 JavaScript 简体版

原文原文鏈接

最近在看一本書《Third-Party Javascript》很不錯，推薦給你們，下載地址各位本身搜索了。
步驟：javascript

1.打開google，鑑於google基本打不開，那麼就打開這個網址吧。http://www.aol.com
2.搜索third party javascript filetype:pdf 通常均可如下載到電子書了。目前只有英文版。html

這書中有一章講到了提升app的效率，其中有一點就是延遲加載初始化不須要的資源，結合書中給出的部分代碼，我這裏簡單的弄了一個jQuery的插件。
首先是js代碼jquery.lazyloading.js。java

 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事件，而後遍歷判斷所選擇的元素是否在界面範圍內。jquery

接下來看看怎麼使用，lazy.html的代碼以下：app

 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>