Skip to content

Commit

Permalink
1.1.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@optimalisatie
optimalisatie committed Feb 12, 2020
1 parent f8e0109 commit 39df63d
Show file tree
Hide file tree
Showing 8 changed files with 191 additions and 26 deletions.
59 changes: 48 additions & 11 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=false']
define: ['WEBP_EXTENSION=false', 'CLICK_EXTENSION=false']
}
},
"lazy-tiny": {
Expand All @@ -229,7 +229,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=false']
define: ['WEBP_EXTENSION=false', 'CLICK_EXTENSION=false']
}
},
"lazy-poly": {
Expand All @@ -245,7 +245,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=false']
define: ['WEBP_EXTENSION=false', 'CLICK_EXTENSION=false']
}
},
"lazy-data-attr": {
Expand All @@ -261,7 +261,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=false']
define: ['WEBP_EXTENSION=false', 'CLICK_EXTENSION=false']
}
},
"lazy-data-attr-poly": {
Expand All @@ -277,10 +277,27 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=false']
define: ['WEBP_EXTENSION=false', 'CLICK_EXTENSION=false']
}
},

// event listener fallback extension
"lazy-data-attr-poly-events": {
closurePath: '../../closure-compiler',
js: [
'src/gcc-define.js',
'tmp/lazy-data-attr-poly-iife.js'
],
jsOutputFile: 'dist/lazy+data-attr+polyfill+events.js',
maxBuffer: 30000,
noreport: true,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=false', 'CLICK_EXTENSION=true']
}
},

"lazy-webp": {
closurePath: '../../closure-compiler',
Expand All @@ -295,7 +312,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=true']
define: ['WEBP_EXTENSION=true', 'CLICK_EXTENSION=false']
}
},
"lazy-webp-poly": {
Expand All @@ -311,7 +328,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=true']
define: ['WEBP_EXTENSION=true', 'CLICK_EXTENSION=false']
}
},
"lazy-webp-data-attr": {
Expand All @@ -327,7 +344,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=true']
define: ['WEBP_EXTENSION=true', 'CLICK_EXTENSION=false']
}
},
"lazy-webp-data-attr-poly": {
Expand All @@ -343,7 +360,25 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=true']
define: ['WEBP_EXTENSION=true', 'CLICK_EXTENSION=false']
}
},

// event listener fallback
"lazy-webp-data-attr-poly-events": {
closurePath: '../../closure-compiler',
js: [
'src/gcc-define.js',
'tmp/lazy-webp-data-attr-poly-iife.js'
],
jsOutputFile: 'dist/lazy+webp+data-attr+polyfill+events.js',
maxBuffer: 30000,
noreport: true,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=true', 'CLICK_EXTENSION=true']
}
},

Expand Down Expand Up @@ -373,7 +408,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=false']
define: ['WEBP_EXTENSION=false', 'CLICK_EXTENSION=false']
}
},

Expand All @@ -390,7 +425,7 @@ module.exports = function(grunt) {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
externs: externs,
define: ['WEBP_EXTENSION=true']
define: ['WEBP_EXTENSION=true', 'CLICK_EXTENSION=false']
}
}
}
Expand All @@ -406,11 +441,13 @@ module.exports = function(grunt) {
'closure-compiler:lazy-poly',
'closure-compiler:lazy-data-attr',
'closure-compiler:lazy-data-attr-poly',
'closure-compiler:lazy-data-attr-poly-events',

'closure-compiler:lazy-webp',
'closure-compiler:lazy-webp-poly',
'closure-compiler:lazy-webp-data-attr',
'closure-compiler:lazy-webp-data-attr-poly',
'closure-compiler:lazy-webp-data-attr-poly-events',

'closure-compiler:lazybg',
'closure-compiler:lazybg-webp',
Expand Down
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "styletools/lazy",
"version": "1.1.2",
"version": "1.1.3",
"description": "A lightweight lazy loader based on `window.IntersectionObserver` with tiny fallback for old browsers.",
"keywords": ["lazy",
"images",
Expand Down
4 changes: 4 additions & 0 deletions dist/lazy+data-attr+polyfill+events.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions dist/lazy+webp+data-attr+polyfill+events.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@style.tools/lazy",
"version": "1.1.2",
"version": "1.1.3",
"description": "A lightweight lazy image and iframe loader based on `window.IntersectionObserver` with tiny fallback for old browsers.",
"author": {
"name": "info@style.tools",
Expand Down
5 changes: 4 additions & 1 deletion src/gcc-define.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@
*/

/** @define {boolean} */
var WEBP_EXTENSION = false;
var WEBP_EXTENSION = false;

/** @define {boolean} */
var CLICK_EXTENSION = false;
71 changes: 59 additions & 12 deletions src/lazy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,13 @@ function $lazy(config, inview, observer_callback) {
threshold: threshold || 0
},
outofview, after_inview,
observer;
observer, webp, eventtypes;

if (WEBP_EXTENSION) {
var webp = (config[3] === false || config.webp === false) ? false : true;
webp = (config[3] === false || config.webp === false) ? false : true;
}
if (CLICK_EXTENSION) {
eventtypes = config[4] || config.events || ['click','mouseover'];
}

// out of view / after_inview callback
Expand Down Expand Up @@ -92,15 +95,27 @@ function $lazy(config, inview, observer_callback) {
}

// default observer callback
observer_callback = observer_callback || function(entries) {
observer_callback = observer_callback || function(entries,fallback) {
var entry, target, unobserve, is_inview;

for (var i = 0, l = entries.length; i < l; i++) {
entry = entries[i];
is_inview = (!observer || entry.isIntersecting);

if (CLICK_EXTENSION) {
fallback = (fallback === entry);
is_inview = (fallback || !observer || entry.isIntersecting);
} else {
is_inview = (!observer || entry.isIntersecting);
}

if (is_inview || outofview) {

target = (observer) ? entry.target : entry;
if (CLICK_EXTENSION) {
target = (!fallback && observer) ? entry.target : entry;
} else {
target = (observer) ? entry.target : entry;
}

unobserve = ((!is_inview) ? outofview : inview)(target, observer, is_inview);

// not specifically instructed to keep observing (= out-of-view callback)
Expand Down Expand Up @@ -128,13 +143,45 @@ function $lazy(config, inview, observer_callback) {
// the intersection observer
observer = (intersectionObserver) ? new intersectionObserver( observer_callback, observerConfig ) : false;

for (var i = 0, l = assets.length; i < l; i++) {
asset = assets[i];
if (observer) {
observer.observe(asset);
} else {
// simple fallback if Intersection Observer is not available
observer_callback([asset]);
// event based fallback
if (CLICK_EXTENSION) {

assets.forEach(function(asset) {

if (observer) {
observer.observe(asset);
} else {
// simple fallback if Intersection Observer is not available
observer_callback([asset]);
}

// event listener
var listener = function(e) {

// remove event
asset.removeEventListener(e.type, listener);
// call handler

observer_callback([asset],asset);
};

for (var i = 0, l = eventtypes.length; i < l; i++) {
asset.addEventListener(eventtypes[i], listener, {
"passive": true,
"once": true
});
}
});
} else {

for (var i = 0, l = assets.length; i < l; i++) {
asset = assets[i];
if (observer) {
observer.observe(asset);
} else {
// simple fallback if Intersection Observer is not available
observer_callback([asset]);
}
}
}

Expand Down
69 changes: 69 additions & 0 deletions test/specs/test-definitions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,75 @@ TEST_DEFINITIONS.basic = function() {

});

}],['$lazy() with events fallback', function(driver, done) {

SERVER_API.reload(driver, {src: '/lazy+webp+data-attr+polyfill+events.js' }).then(function() {
return driver.executeAsyncScript(function() {
var cb = arguments[arguments.length - 1];

// domready
window.requestAnimationFrame(function() {
window.scrollTo(0,0);

$lazy();

function check(pos, type) {
if (!type) {
type = '.webp';
}
return document.getElementById('img_' + pos).hasAttribute('src') && document.getElementById('img_' + pos).getAttribute('src')
// check for .webp
&& (document.getElementById('img_' + pos).getAttribute('src').indexOf(type) !== -1)
}

setTimeout(function() {

if (!check('top')) {
cb('top img not loaded: ' + document.getElementById('img_top').getAttribute('src') + check('top'));
} else if ( !check('bottom') ) {

// send click event
var bottom = document.getElementById('img_bottom');
var evt = new MouseEvent('click', {
bubbles: false,
cancelable: true,
view: window
});
// If cancelled, don't dispatch our event
bottom.dispatchEvent(evt);

setTimeout(function() {

// test error fallback on bottom5 (test2.jpg = 404)
if (check('bottom')) {
cb(true);
} else {
cb('footer img not loaded ' + document.getElementById('img_bottom').getAttribute('src') + ' 5:' + document.getElementById('img_bottom5').getAttribute('src'));
}
},100);

} else {

// footer was loaded while not visible
cb('footer img was loaded: ' + document.getElementById('img_bottom').getAttribute('src') + check('bottom'));
}
});
});

}).then(function(return_value) {

if (typeof return_value === 'string') {
throw new Error(return_value);
}

assert.equal(return_value, true);

done();

}).catch(done);

});

}],
['$lazybg() background images in stylesheets', function(driver, done) {

Expand Down

0 comments on commit 39df63d

Please sign in to comment.