https://quatrorodas.abril.com.br/wp-content/themes/abril-master2/js/img-cls-loading.js?ver=0298283839390303

1const getAllStyles = (element, width, height) => {
2  if (!element) return {}; // Element does not exist, empty list.
3  var win = document.defaultView || window,
4    styl = [];
5  var styleNode = {};
6  if (win.getComputedStyle) {
7    /* Modern browsers */
8    style = win.getComputedStyle(element, '');
9    for (var i = 0; i < style.length; i++) {
10      styleNode[style[i]] = style.getPropertyValue(style[i]);
11      //               ^name ^           ^ value ^
12    }
13  } else if (element.currentStyle) {
14    /* IE */
15    style = element.currentStyle;
16    for (var name in style) {
17      styleNode[style[i]] = style[name];
18    }
19  } else {
20    /* Ancient browser..*/
21    style = element.style;
22    for (var i = 0; i < style.length; i++) {
23      styleNode[style[i]] = style[style[i]];
24    }
25  }
26
27  styleNode.width = styleNode.width === '0px' ? `${width}px` : styleNode.width;
28  styleNode.height = styleNode.height === '0px' ? `${height}px` : styleNode.height;
29
30  return styleNode;
31};
32
33const getMargins = (imgStyles = false) => imgStyles !== false ? `margin-left:${imgStyles['margin-left']};margin-top:${imgStyles['margin-top']};margin-right:${imgStyles['margin-right']};margin-bottom:${imgStyles['margin-bottom']};` : 'margin-left:0px !important;margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;';
34
35const getBorderRadius = (imgStyles = false) => imgStyles !== false ? `border-bottom-left-radius:${imgStyles['border-bottom-left-radius']};border-bottom-right-radius:${imgStyles['border-bottom-right-radius']};border-end-end-radius:${imgStyles['border-end-end-radius']};border-end-start-radius:${imgStyles['border-end-start-radius']};border-start-end-radius:${imgStyles['border-start-end-radius']};border-start-start-radius:${imgStyles['border-start-start-radius']};border-top-left-radius:${imgStyles['border-top-left-radius']};border-top-right-radius:${imgStyles['border-top-right-radius']};` : '';
36
37const getPercentage = (width, height, reference, metric) => (metric === 'width' || metric === 'max-width') ? parseFloat(reference) * 100 / width : parseFloat(reference) * 100 / height;
38
39const getSpecificSize = (width, height, imgStyles, metric, previousValue = []) => {
40  const reference = imgStyles[metric];
41  if (reference !== 'none') {
42    let loaderWidth, loaderHeight;
43    if ((reference.search('px') >= 0 && reference !== '0px') || (reference.search('%') >= 0 && previousValue.length === 0)) {
44      const percentage = getPercentage(width, height, reference, metric);
45      loaderWidth = width * (percentage / 100);
46      loaderHeight = height * (percentage / 100);
47
48      return [loaderWidth, loaderHeight, reference.search('%') >= 0 ? '%' : 'px', metric];
49    }
50  }
51
52  return previousValue;
53};
54
55const getSize = (width, height, imgStyles) => {
56  let size = [];
57  ['max-height', 'max-width', 'height', 'width'].forEach((metric) => {
58    size = getSpecificSize(width, height, imgStyles, metric, size);
59  });
60  return size;
61};
62
63const placeholderAnimationCleaner = (element, size) => {
64  // element.parentElement.removeAttribute("class");
65  // element.parentElement.removeAttribute("style"); 
66  element.setAttribute("style", size);
67}
68
69Object.values(document.getElementsByTagName('img')).forEach((img) => {
70
71  if (img.getAttribute('data-placeholder')) {
72    const [width, height] = img.getAttribute('data-placeholder').split('-')[1].split('x');
73    const imgStyles = getAllStyles(img, width, height);
74
75    let [loaderWidth, loaderHeight, symbol, metric] = getSize(width, height, imgStyles);
76    if (symbol === '%') {
77      let size;
78      if (metric === 'width' || metric === 'max-width') {
79        size = img.parentElement.clientWidth;
80      } else {
81        size = img.parentElement.clientHeight;
82      }
83      const percentage = getPercentage(width, height, size, metric);
84      loaderWidth = width * (percentage / 100);
85      loaderHeight = height * (percentage / 100);
86      symbol = 'px';
87    }
88
89    if (width == 85 && height == 85) {
90      loaderWidth = 85;
91      loaderHeight = 85;
92      symbol = 'px';
93    }
94
95    const imgSize = `width:${loaderWidth}${symbol};height:${loaderHeight}${symbol};`;
96    const imgAnimation = 'animation-delay: 1000ms;animation-direction: alternate;animation-duration: 1s;animation-iteration-count: 1.0;animation-name: image-opacity;animation-timing-function: steps(10,end);';
97
98    img.setAttribute('loading', `lazy`);
99    // img.setAttribute('onload', `placeholderAnimationCleaner(this, '${imgSize}');`);
100    // img.setAttribute('style', `${imgSize + imgAnimation}background-color: #BDBDBD;`); 
101  }
102});