81 lines
3.1 KiB
JavaScript
81 lines
3.1 KiB
JavaScript
/**
|
|
* Analyzes images and detects which one can be lazy-loaded (are below the fold)
|
|
*
|
|
* @see https://github.com/macbre/phantomas/issues/494
|
|
*/
|
|
/* global document: true, window: true */
|
|
|
|
exports.version = '1.0.a';
|
|
|
|
exports.module = function(phantomas) {
|
|
'use strict';
|
|
|
|
phantomas.setMetric('lazyLoadableImagesBelowTheFold'); // @desc number of images displayed below the fold that can be lazy-loaded
|
|
|
|
phantomas.on('report', function() {
|
|
phantomas.log('lazyLoadableImages: analyzing which images can be lazy-loaded...');
|
|
|
|
phantomas.evaluate(function() {
|
|
(function(phantomas) {
|
|
phantomas.spyEnabled(false, 'analyzing which images can be lazy-loaded');
|
|
|
|
var images = document.body.getElementsByTagName('img'),
|
|
i,
|
|
len = images.length,
|
|
offset,
|
|
path,
|
|
processedImages = {},
|
|
src,
|
|
viewportHeight = window.innerHeight,
|
|
// Add an offset of 100px under the height of the screen
|
|
LAZYLOAD_OFFSET = 100;
|
|
|
|
phantomas.log('lazyLoadableImages: %d image(s) found, assuming %dpx offset to be the fold', len, viewportHeight);
|
|
|
|
for (i = 0; i < len; i++) {
|
|
// @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
|
|
offset = images[i].getBoundingClientRect().top;
|
|
src = images[i].src;
|
|
|
|
// ignore base64-encoded images
|
|
if (src === '' || /^data:/.test(src)) {
|
|
continue;
|
|
}
|
|
|
|
path = phantomas.getDOMPath(images[i]);
|
|
|
|
// get the most top position for a given image (deduplicate by src)
|
|
if (typeof processedImages[src] === 'undefined') {
|
|
processedImages[src] = {
|
|
offset: offset,
|
|
path: path
|
|
};
|
|
}
|
|
|
|
// maybe there's the same image loaded above the fold?
|
|
if (offset < processedImages[src].offset) {
|
|
processedImages[src] = {
|
|
offset: offset,
|
|
path: path
|
|
};
|
|
}
|
|
}
|
|
|
|
phantomas.log('lazyLoadableImages: checking %d unique image(s)', Object.keys(processedImages).length);
|
|
|
|
Object.keys(processedImages).forEach(function(src) {
|
|
var img = processedImages[src];
|
|
|
|
if (img.offset > viewportHeight + LAZYLOAD_OFFSET) {
|
|
phantomas.log('lazyLoadableImages: <%s> image (%s) is below the fold (at %dpx)', src, img.path, img.offset);
|
|
|
|
phantomas.incrMetric('lazyLoadableImagesBelowTheFold');
|
|
phantomas.addOffender('lazyLoadableImagesBelowTheFold', src);
|
|
}
|
|
});
|
|
|
|
phantomas.spyEnabled(true);
|
|
})(window.__phantomas);
|
|
});
|
|
});
|
|
}; |