penthouse/lib/browser-sandbox/criticalImages.js

Generate critical path CSS for web pages

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = findCriticalImages;

// TODO
// explore whether worth re-using the isElementAboveFoldCache that pruneNonCriticalCssSelectors use,
// i.e. whether it's slow without, and faster with.
function findCriticalImages() {
  const imgs = Array.from(document.querySelectorAll('img'));
  var h = window.innerHeight;

  function requiresRequest(imgElement) {
    const {
      src
    } = imgElement;
    return src && src.indexOf('data:') !== 0;
  }

  const criticalImages = imgs.filter(element => {
    if (!requiresRequest(element)) {
      return false;
    }

    const {
      top,
      width,
      height
    } = element.getBoundingClientRect(); // ignoring invisible images, including pixel trackers etc

    return top < h && width > 0 && height > 0;
  });
  return Array.from(new Set(criticalImages.map(element => element.src)));
}