|
1 | | -"use strict"; |
2 | | -var Lazyload = function(elements,options){ |
3 | | - var that = this; |
4 | | - this.settings = { |
5 | | - threshold : 0 , // 临界值 |
6 | | - event : 'scroll' , // 事件类型 |
7 | | - container : window, // 容器 |
8 | | - data_attribute : 'original', // 标记 |
9 | | - apper : null , // 更新图片时的回调函数 |
10 | | - placeholder : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC' |
11 | | - } |
12 | | - |
13 | | - for(var item in options){ |
14 | | - this.settings[item] = options[item]; |
15 | | - } |
16 | | - |
17 | | - for(var i = 0 ; i < elements.length ; i++){ |
18 | | - var src = elements[i].getAttribute('src'); |
19 | | - if(!src || src == ''){ |
20 | | - elements[i].src = this.settings.placeholder; |
21 | | - } |
22 | | - that.update(elements[i]); |
23 | | - } |
24 | | - |
25 | | - this.settings.container.onscroll = function(){ |
26 | | - for(var i = 0 ; i < elements.length ; i++){ |
27 | | - that.update(elements[i]); |
28 | | - } |
29 | | - } |
30 | | -} |
| 1 | +// 懒加载插件 |
| 2 | +// Lazyload 为一个构造函数，需要配合 new 关键字使用 |
| 3 | +// example |
| 4 | +// new Lazyload(target,{ |
| 5 | +// threshold : 0 ， 临界值，相差容器多少 px 位置开始触发图片更新 ，默认值 0 |
| 6 | +// event:'scroll', 事件类型，默认 scroll |
| 7 | +// container:window, 容器，默认 window |
| 8 | +// data_attribute：data-original, 标记，真实的图片地址，默认 data-original |
| 9 | +// apper：null, 即将触发更新时的回掉函数，默认 null |
| 10 | +// placeholder：'' 占位图片，默认 '' |
| 11 | +// }) |
31 | 12 |
|
32 | 13 |
|
33 | | -Lazyload.prototype = { |
34 | | - // 判断是否触发图片更新 |
35 | | - update : function(element){ |
36 | | - if(this.abovethetop(element) && this.abovetheleft(element)){ |
37 | | - this.settings.apper && this.settings.apper(element); |
38 | | - this.change(element); |
| 14 | + var Lazyload = function (elements, options) { |
| 15 | + var that = this; |
| 16 | + this.settings = { |
| 17 | + threshold: 0, // 临界值 |
| 18 | + event: 'scroll', // 事件类型 |
| 19 | + container: window, // 容器 |
| 20 | + data_attribute: 'data-original', // 标记 |
| 21 | + apper: null, // 更新图片时的回调函数 |
| 22 | + placeholder: '' |
39 | 23 | } |
40 | | - }, |
41 | | - // 判断是否接近 |
42 | | - abovethetop : function(element){ |
43 | | - var fold, |
44 | | - containerHeight; |
45 | | - if(element.getAttribute('src') != this.settings.placeholder){ |
46 | | - return false; |
| 24 | + |
| 25 | + for (var item in options) { |
| 26 | + this.settings[item] = options[item]; |
47 | 27 | } |
48 | | - if(this.settings.container == undefined || this.settings.container == window){ |
49 | | - if (window.pageYOffset) { |
50 | | - fold = window.pageYOffset; |
| 28 | + |
| 29 | + for (var i = 0; i < elements.length; i++) { |
| 30 | + var src = elements[i].getAttribute('src'); |
| 31 | + if (!src || src == '') { |
| 32 | + elements[i].src = this.settings.placeholder; |
51 | 33 | } |
52 | | - else{ |
53 | | - fold = document.body.scrollTop; |
54 | | - } |
55 | | - containerHeight = document.documentElement.clientHeight |
56 | | - }else{ |
57 | | - fold = this.settings.container.scrollTop; |
58 | | - containerHeight = this.settings.container.clientHeight |
| 34 | + that.update(elements[i]); |
59 | 35 | } |
60 | | - fold = fold ? fold : 0; |
61 | | - return fold + containerHeight + this.settings.threshold >= element.offsetTop; |
62 | | - }, |
63 | | - abovetheleft : function(element){ |
64 | | - var fold, |
65 | | - containerWidth; |
66 | | - if(element.getAttribute('src') != this.settings.placeholder){ |
67 | | - return false; |
| 36 | + |
| 37 | + this.settings.container.onscroll = function () { |
| 38 | + for (var i = 0; i < elements.length; i++) { |
| 39 | + that.update(elements[i]); |
| 40 | + } |
68 | 41 | } |
69 | | - if(this.settings.container == undefined || this.settings.container == window){ |
70 | | - if (window.pageYOffset) { |
71 | | - fold = window.pageXOffset; |
| 42 | + } |
| 43 | + |
| 44 | + |
| 45 | + Lazyload.prototype = { |
| 46 | + |
| 47 | + // 判断是否触发图片更新 |
| 48 | + update: function (element) { |
| 49 | + if (this.abovethetop(element) && this.abovetheleft(element)) { |
| 50 | + |
| 51 | + // 确保更新函数只执行一次 |
| 52 | + if (element.src !== element.getAttribute(this.settings.data_attribute)){ |
| 53 | + this.settings.apper && this.settings.apper(element); |
| 54 | + } |
| 55 | + |
| 56 | + this.change(element); |
| 57 | + } |
| 58 | + }, |
| 59 | + |
| 60 | + // 判断是否接近 |
| 61 | + abovethetop: function (element) { |
| 62 | + var fold, |
| 63 | + containerHeight; |
| 64 | + if (element.getAttribute('src') != this.settings.placeholder && this.settings.placeholder !== '') { |
| 65 | + return false; |
72 | 66 | } |
73 | | - else { |
74 | | - fold = document.body.scrollLeft; |
75 | | - } |
76 | | - containerWidth = document.documentElement.clientWidth |
77 | | - }else{ |
78 | | - fold = this.settings.container.scrollLeft; |
79 | | - containerWidth = this.settings.container.clientWidth |
| 67 | + if (this.settings.container == undefined || this.settings.container == window) { |
| 68 | + if (window.pageYOffset) { |
| 69 | + fold = window.pageYOffset; |
| 70 | + } |
| 71 | + else { |
| 72 | + fold = document.body.scrollTop; |
| 73 | + } |
| 74 | + containerHeight = document.documentElement.clientHeight |
| 75 | + } else { |
| 76 | + fold = this.settings.container.scrollTop; |
| 77 | + containerHeight = this.settings.container.clientHeight |
| 78 | + } |
| 79 | + fold = fold ? fold : 0; |
| 80 | + return fold + containerHeight + this.settings.threshold >= element.offsetTop; |
| 81 | + }, |
| 82 | + |
| 83 | + abovetheleft: function (element) { |
| 84 | + var fold, |
| 85 | + containerWidth; |
| 86 | + if (element.getAttribute('src') != this.settings.placeholder && this.settings.placeholder !== '') { |
| 87 | + return false; |
| 88 | + } |
| 89 | + if (this.settings.container == undefined || this.settings.container == window) { |
| 90 | + if (window.pageYOffset) { |
| 91 | + fold = window.pageXOffset; |
| 92 | + } |
| 93 | + else { |
| 94 | + fold = document.body.scrollLeft; |
| 95 | + } |
| 96 | + containerWidth = document.documentElement.clientWidth |
| 97 | + } else { |
| 98 | + fold = this.settings.container.scrollLeft; |
| 99 | + containerWidth = this.settings.container.clientWidth |
| 100 | + } |
| 101 | + fold = fold ? fold : 0; |
| 102 | + return fold + containerWidth + this.settings.threshold >= element.offsetLeft; |
| 103 | + }, |
| 104 | + |
| 105 | + // 改变默认图片 |
| 106 | + change: function (element) { |
| 107 | + var originalSrc = element.getAttribute(this.settings.data_attribute); |
| 108 | + if (originalSrc) { |
| 109 | + element.src = originalSrc; |
| 110 | + }; |
80 | 111 | } |
81 | | - fold = fold ? fold : 0; |
82 | | - return fold + containerWidth + this.settings.threshold >= element.offsetLeft; |
83 | | - }, |
84 | | - // 改变默认图片 |
85 | | - change : function(element){ |
86 | | - var originalSrc = element.getAttribute(this.settings.placeholder); |
87 | | - if(originalSrc){ |
88 | | - element.src = originalSrc; |
89 | | - }; |
90 | 112 | } |
91 | | -} |
|
0 commit comments