forked from processing-js/processing-js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprocessing-lazyload.js
More file actions
executable file
·150 lines (131 loc) · 4.96 KB
/
processing-lazyload.js
File metadata and controls
executable file
·150 lines (131 loc) · 4.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/*
L A Z Y L O A D I N G F O R P R O C E S S I N G . J S
Part of the Processing.js project
License : MIT
Web Site : http://processingjs.org
Github Repo. : http://github.com/jeresig/processing-js
Bug Tracking : http://processing-js.lighthouseapp.com
*/
(function() {
/**
* Can we rely on there being a w3c DOM available?
*/
var isDOMPresent = ("document" in this) && !("fake" in this.document);
/**
* If there is no DOM, don't run.
*/
if (!isDOMPresent) {
throw("This browser does not support the w3c DOM interface, which this extension for Processing.js relies on.");
}
/**
* If there is no Processing.js, don't run.
*/
if (!Processing) {
throw("Please load Processing.js before loading the \"lazy loading\" extension.");
}
/**
* Prevent processing from running its init function
*/
Processing.disableInit();
// constructor
LazyLoading = this.LazyLoading = {};
/**
* This object will track every sketch that needs to be lazily loaded
*/
var sketches = {};
/**
* Get all canvas elements on the page, and if they indicate that
* they load processing sources, add them to our to-do collection/
*/
var setSketches = function() {
var elements = document.getElementsByTagName('canvas');
var _id = 0;
for (var e=0, end=elements.length; e<end; e++) {
var canvas = elements[e];
// make sure we only grab canvas elements that are associated with processing source files
if (canvas.getAttribute("data-processing-sources") || canvas.getAttribute("data-src") || canvas.getAttribute("datasrc")) {
if(!canvas.id) { canvas.id = "canvas"+(_id++); }
var sketch = {};
sketch.canvas = canvas;
sketches[canvas.id] = sketch;
}
}
};
/**
* This function sets the height values for the sketch's
* canvas's top and bottom.
* @param {sketch} sketch The sketch object for which the top/bottom values are set
*/
var setHeightValues = function(sketch) {
sketch.top = getElementPosition(sketch.canvas);
sketch.bottom = sketch.top + sketch.canvas.clientHeight;
}
/**
* General purpose "height of element on page" function.
* Code from http://www.quirksmode.org/js/findpos.html
* @param {HTMLElement} element The HTML element for which the height on the page is being checked
*/
var getElementPosition = function(obj) {
var curTop = 0;
if (obj.offsetParent) {
do {
curTop += obj.offsetTop;
} while (!!(obj = obj.offsetParent));
}
return curTop;
};
/**
* For each sketch in the to-do list, check whether it should be loaded
* based on whether or not the user can see any part of the canvas it
* is to be loaded in is visible on their screen.
*/
var checkPositions = LazyLoading.checkPositions = function() {
var top = 0, bottom = 0;
for (s in sketches) {
var sketch = sketches[s];
top = window.pageYOffset;
bottom = top + window.innerHeight;
setHeightValues(sketch);
if ((top <= sketch.top && sketch.top <= bottom) || (top <= sketch.bottom && sketch.bottom <= bottom)) {
LazyLoading.loadSketch(sketch);
delete sketches[s];
}
}
};
/**
* Load the sketch associated with a canvas, from source indicated by that canvas.
* @param {sketch} sketch An administrative sketch object
*/
var loadSketch = LazyLoading.loadSketch = function(sketch) {
if (sketch.canvas) {
// form an array of which files must be loaded for this sketch
var processingSources = sketch.canvas.getAttribute('data-processing-sources');
if(processingSources===null) { processingSources = sketch.canvas.getAttribute('data-src'); }
if(processingSources===null) { processingSources = sketch.canvas.getAttribute('datasrc'); }
var filenames = processingSources.split(' ');
for (var j = 0; j < filenames.length;) {
if (filenames[j]) { j++; }
else { filenames.splice(j, 1); }}
// make Processing.js load this sketch into its canvas
Processing.loadSketchFromSources(sketch.canvas, filenames);
}
};
/**
* In order for lazy-loading to do its work when it is started, it needs to first builds
* the to-do list for sketches that may eventually need loading, then check whether
* any of them need immediate loading, and finally, it needs to set up a scroll event
* listener so that every time a user scrolls the page (in whichever way), the lazy
* loader checks whether this resulted in one or more sketches needing to be loaded
* because they have become visible to the user.
*/
var init = function() {
setSketches();
checkPositions();
document.addEventListener("scroll", LazyLoading.checkPositions, false);
}
/**
* Finally, we kick-start the whole lazy loading process by making sure init() is called
* when the document signals it has finished building the page's DOM.
*/
document.addEventListener('DOMContentLoaded', init, false);
})();