Изображение Ленивая загрузка изображений "прыжки"

Question

Эй, я хочу лениво загрузить изображения на мою страницу, поэтому я создал тег data-src на своих тегах изображений, а затем загружаю его.

Я знаю, что есть много библиотек и т. Д., Но я должен выучить js и css, поэтому я устал к этому без какой-либо помощи.

Теперь проблема в том, что изображения не имеют начальной высоты, поэтому при загрузке вся страница "прыгает"

вот мой код js:

var smuLazyLoad = (function (self) {
var body = document.getElementsByTagName('body')[0];

var defaultSetup = {
    classSelector: "lazy",
    loadDelay: 100,
    fadeTime: 0.5
};

self.setup = {};

self.init = function (options) {
    options = options || {};
    self.setup.loadDelay = options.loadDelay || defaultSetup.loadDelay;
    self.setup.classSelector = options.classSelector || defaultSetup.classSelector;
    self.setup.fadeTime = options.fadeTime || defaultSetup.fadeTime;
    self.appendHelperStyles();
    self.addEvent('load',window,self.selectImages)
};


self.selectImages = function () {
    var tags = document.getElementsByClassName(self.setup.classSelector);
    for (var i = 0; i < tags.length; i++) {
        self.loadImage(tags[i]);
    }
    self.appendShowCss();
};

self.appendShowCss = function () {
    setTimeout(function () {
        var style = document.createElement('style');
        style.innerText = "." + self.setup.classSelector + "{opacity:1 !important;}";
        body.appendChild(style);
    }, self.setup.loadDelay);
};

self.loadImage = function (tag) {
    var imageUrl = tag.getAttribute('data-src');
    tag.setAttribute('src', imageUrl);
};


self.appendHelperStyles = function () {
    var style = document.createElement('style');
    style.innerText = "." + self.setup.classSelector + "{transition:all ease-in " + self.setup.fadeTime + "s;}";
    body.appendChild(style);
};


self.addEvent = function (ev,ele,func) {
    if (ele.addEventListener)
        ele.addEventListener(ev,func,false);
    else if (elem.attachEvent) {
        ele.attachEvent("on"+ev, func);
    }
    else {
        ele[ev] = func;
    }
};
return self;
 }(smuLazyLoad || {}));

и мои теги изображений... (веточка /craftcms)

    <img src="/onePxImage.jpg"
         alt="{{ image.title }}"
         data-src="/{{ image.getUrl('teaserImage') }}"
         style="opacity: 0;"
         class="lazy"
         width="{{ image.getHeight('teaserImage') }}"
         height="{{ image.getWidth('teaserImage') }}"
    >