YellowLabTools/lib/tools/phantomas/custom_modules/modules/lazyLoadableYLT/lazyLoadableYLT.js

/**
 * 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);
        });
    });
};