https://www.nim.org/typo3temp/assets/compressed/debugimgsizes-91587c8b8304b392d7c525859122dc2a.js?1789998175

1'use strict';
2
3{
4
5    var bindEvent = function bindEvent(el, eventName, eventHandler) {
6        if (el.addEventListener) {
7            el.addEventListener(eventName, eventHandler, false);
8        } else if (el.attachEvent) {
9            el.attachEvent('on' + eventName, eventHandler);
10        }
11    };
12
13
14    var getImageDimensions = function getImageDimensions(imgEl) {
15
16        var src = imgEl.currentSrc || imgEl.src;
17        var t = new Image();
18        t.src = src;
19        return {
20            'src': src,
21            'width': t.width,
22            'height': t.height,
23            'ratio': (t.height / t.width * 100).toFixed(2)
24        };
25    };
26
27    var addDebugMessage = function addDebugMessage(imgEl, data) {
28        var parent = imgEl.parentNode;
29
30        var msg = document.createElement('ul');
31
32        var elementWidth = document.createElement('li');
33        elementWidth.appendChild(document.createTextNode('container: ' + data.elementWidth));
34
35        var currentSrcWidth = document.createElement('li');
36        currentSrcWidth.appendChild(document.createTextNode('current: ' + data.currentSrcWidth + 'x' + data.currentSrcHeight + ' (' + data.ratio + ')'));
37
38        msg.appendChild(currentSrcWidth);
39        msg.appendChild(elementWidth);
40
41        if (typeof parent.getElementsByClassName('img-debug')[0] === "undefined") {
42            var container = document.createElement("div");
43            container.setAttribute('class', 'img-debug');
44            container.appendChild(msg);
45            // check if parent has an img tag. If so, place the element after the img, else at the end of the parent
46            var imgTag = parent.getElementsByTagName('img')[0];
47            if (imgTag !== "undefined" ) {
48                imgTag.parentNode.insertBefore(container, imgTag.nextSibling);
49
50            } else {
51                parent.appendChild(container);
52            }
53        } else {
54            var debugContainer = parent.getElementsByClassName('img-debug')[0];
55            debugContainer.replaceChild(msg, debugContainer.childNodes[0]);
56        }
57    };
58
59    window.observe = function (imgEl) {
60        var action = function action() {
61            var dimensions = getImageDimensions(imgEl);
62            var parent = imgEl.parentNode;
63            var data = {
64                currentSrc: imgEl.currentSrc || imgEl.src,
65                currentSrcWidth: dimensions.width,
66                currentSrcHeight: dimensions.height,
67                ratio: dimensions.ratio,
68                elementWidth: imgEl.width,
69                html: parent.outerHTML
70            };
71            addDebugMessage(imgEl, data);
72        };
73        // img is already loaded, so call once here
74        action();
75
76        // srcset has been replaced by lazyloader
77        bindEvent(imgEl, 'load', function () {
78            action();
79        });
80
81        bindEvent(imgEl, 'resize', function () {
82            action();
83        });
84
85    };
86
87    var images = document.querySelectorAll('img[data-img-debug="1"]');
88
89    for (var i = 0; i < images.length; i++) {
90        observe(images[i]);
91    }
92
93    // document.addEventListener('lazybeforeunveil', function(e){
94    //     console.log("unveil incoming");
95    //     setTimeout(function(){ console.log("Hello"); }, 3000);
96    //     console.log(e);
97    //     // var bg = e.target.getAttribute('data-bg');
98    //     // if(bg){
99    //     //     e.target.style.backgroundImage = 'url(' + bg + ')';
100    //     // }
101    // });
102
103}