Plugin works, but with image overscale bug

Okay support is tragic for this plugin, if not tragic, then probably there is no support.

Script is written almost properly they’re not using any known open source lazyload library or at least not specifying which it is. In script there is some kind of filemod bug or something which scales images to full-width of screen and sets it as their natural size so guess it becomes embedded in file itself.

I’ve reported these problems but no one responds for more than a week.

But overall, maybe one of the best lazyload plugins that work out of the box on default template without any modifications (So its mostly suitable for demos only and not production).

How I do lazyload fixes, still unfinished.

// Stack which holds all callbacks to be executed after image is loaded.
window.afterLazyImageHasLoadedStack = [];

// The executer which iterrates through callback stack.
var afterLazyImageHasLoadedStackExecuter = function () {
    window.afterLazyImageHasLoadedStack.forEach(function (functionToCall) {
        functionToCall();
    });
};

// Binding executer to callback when image loaded trigger.
$(document).ready(function () {
    if (typeof window.lazyLoadOptions !== 'undefined' && Object.keys(window.lazyLoadOptions).length > 0) {
        window.lazyLoadOptions['callback_set'] = afterLazyImageHasLoadedStackExecuter;
    }
});
...
// This is how I push into the stack some callbacks which need to be recalculated after images are loaded

$(document).ready(function () {
        if (typeof window.afterLazyImageHasLoadedStack !== 'undefined') {
            window.afterLazyImageHasLoadedStack.push(positionSidebar);
            window.afterLazyImageHasLoadedStack.push(stickyAssignment);
        }
});

//Reloading images with proper naturalWidth and naturalHeight
jQuery(function($){
    $(document).ready(function() {
        window.afterLazyImageHasLoadedStack.push(function(element) {
            var imgNat = document.createElement('img');
            console.log(element.src);
            imgNat.setAttribute('src', element.dataset.hasOwnProperty('lazySrc') ? element.dataset.lazySrc : element.src );
            imgNat.setAttribute('height', element.getAttribute('height'));
            imgNat.setAttribute('width', element.getAttribute('width'));
            imgNat.setAttribute('alt', element.getAttribute('alt'));
            imgNat.setAttribute('class', element.getAttribute('class'));
            if (element.hasAttribute('data-lazy-srcset')) {
                imgNat.setAttribute('data-srcset', element.getAttribute('data-lazy-srcset'));
            }
            if (element.hasAttribute('data-lazy-sizes') && element.attribute) {
                imgNat.setAttribute('data-sizes', element.getAttribute('data-lazy-sizes'));
            }
            if (element.hasAttribute('data-copyright')) {
                imgNat.setAttribute('data-copyright', element.getAttribute('data-copyright'));
            }
            if (element.hasAttribute('data-description')) {
                imgNat.setAttribute('data-description', element.getAttribute('data-description'));
            }
            if (element.hasAttribute('data-headline')) {
                imgNat.setAttribute('data-headline', element.getAttribute('data-headline'));
            }

            imgNat.setAttribute('data-was-processed', true);

            imgNat.onload = function() {
                if (window.jQuery.length > 0) {
                    $(element).replaceWith($(imgNat));
                } else {
                    element.parentNode.replaceChild(imgNat, element);
                }
            };
        });
    });
});

As well I had written code for image rapplication, with newely created image element in js and replacing with it existing one, which makes it load with proper naturalWidth and naturalHeight.

• This topic was modified 6 years, 6 months ago by juslintek.
• This topic was modified 6 years, 6 months ago by juslintek.
• This topic was modified 6 years, 6 months ago by juslintek.
• This topic was modified 6 years, 6 months ago by juslintek.