Skip-lazy-load class on parent not working after update from 1.6.1 to 1.6.3.2

This fixes it for me:

    //Check if element has some class that should be skipped
    function myClasses($this, skipClasses) {
        if (skipAllParent.length > 0 && $this.parents().hasClass(skipAllParent) ) {
            return false;
        }
        if ($this instanceof SVGElement === false) {
            var myClasses = $this.className.split(' ');
            if (myClasses.some(function (v) { return skipClasses.indexOf(v) >= 0; })) {
                return false;
            } else {
                return true;
            }
        }
    }

Note I renamed it from image to $this, because not all lazyloaded items are images (iframes etc.) and $ for convention to indicate that it’s a jQuery item and thus you can call things like .parent on it. — Maybe should rename it $item?

Actually I had above code wrong. Since we’re in a .each loop at that point it’s not $item but just item – so it needs to be wrapped in order to call the same functions on it as the old (1.6.1) code did.

    //Check if element has some class that should be skipped
    function myClasses(element, skipClasses) {
        if (skipAllParent.length > 0 && $(element).parents().hasClass(skipAllParent) ) {
            return false;
        }
        if (element instanceof SVGElement === false) {
            var myClasses = element.className.split(' ');
            if (myClasses.some(function (v) { return skipClasses.indexOf(v) >= 0; })) {
                return false;
            } else {
                return true;
            }
        }
    }

• This reply was modified 5 years, 3 months ago by Julix. Reason: format didn't work
• This reply was modified 5 years, 3 months ago by Julix. Reason: format still didn't work
• This reply was modified 5 years, 3 months ago by Julix.

Please also include the following changes:

• Primarily: change cssText modification (which overwrites all inline styles) to opacity modification (which only changes that property)
• make everything check for equality or unequality rather than just equivalence
• move var found declaration up so it’s used in scope

/*
  Plugin Name: Zedna WP Image Lazy Load
  Plugin URI: https://profiles.www.ads-software.com/zedna#content-plugins
  Text Domain: wp-image-lazy-load
  Domain Path: /languages
  Description: Image lazy load plugin to boost page load time and save bandwidth by removing all the images, background-images, responsive images, iframes and videos. Elements will load just when reach visible part of screen. Lazy loading can be also applied on themes.
  Version: 1.6.3.3
  Author: Radek Mezulanik
  Author URI: https://cz.linkedin.com/in/radekmezulanik
  License: GPL3
*/

(function ($) {
    //get options from DB
    var skipIframe = wpimagelazyload_settings.wpimagelazyloadsetting_skipiframe; //true=skip iframe, false=apply the code
    var skipParent = wpimagelazyload_settings.wpimagelazyloadsetting_skipparent;
    var skipAllParent = wpimagelazyload_settings.wpimagelazyloadsetting_skipallparent.split(";");
    var skipVideo = wpimagelazyload_settings.wpimagelazyloadsetting_skipvideo;
    var loadonposition = parseInt(wpimagelazyload_settings.wpimagelazyloadsetting_loadonposition);
    var importantVC = wpimagelazyload_settings.wpimagelazyloadsetting_importantvc;

    //Check if element has some class that should be skipped
    function myClasses(element, skipClasses) {
        if (skipAllParent.length > 0 && $(element).parents().hasClass(skipAllParent) ) {
            return false;
        }
        if (element instanceof SVGElement === false) {
            var myClasses = element.className.split(' ');
            if (myClasses.some(function (v) { return skipClasses.indexOf(v) >= 0; })) {
                return false;
            } else {
                return true;
            }
        }
    }

    $('document').ready(function () {

        //set visible part of screen
        var scrollBottom = $(window).scrollTop() + window.innerHeight;

        /*
        -remove & backup source from images
        -remove & backup source set from responsive images
        -give back source of visible images
        -for some browsers, <code>bgbak</code> is undefined; for others, <code>bgbak</code> is false -> check both like: if (typeof srcsetbak !== typeof undefined && srcsetbak !== false)
        */
        $('img').each(function () {
            if (myClasses(this, skipAllParent)) {
                this.setAttribute('src-backup', this.src);
                var elements = $(this);
                var elementsoffset = elements.offset();
                var isvisibleOriginal = parseInt(elementsoffset.top);
                var isvisible = isvisibleOriginal + loadonposition;
                var srcsetbak = $(this).attr('srcset');
                if (srcsetbak) {
                    $(this).attr("srcset-backup", srcsetbak);
                }
                if (scrollBottom < isvisible) {
                    this.style.opacity = "0";
                    this.setAttribute('src', '');
                    this.setAttribute('srcset', '');
                }
            }
        });

        /*
        remove & backup source from videos
        give back source of visible videos
        */
        if (skipVideo === "false") {
            $('video').each(function () {
                if (myClasses(this, skipAllParent)) {
                    this.setAttribute('src-backup', this.src);
                    var elements = $(this);
                    var elementsoffset = elements.offset();
                    var isvisibleOriginal = parseInt(elementsoffset.top);
                    var isvisible = isvisibleOriginal + loadonposition;
                    var source = elements.find("source");
                    if (scrollBottom < isvisible) {
                        this.style.opacity = "0";
                        this.setAttribute('src', '');
                        for (i = 0; i < source.length; i++) {
                            source[i].setAttribute('src-backup', source[i].src);
                            source[i].setAttribute('src', '');
                        }
                    }
                }
            });
        }

        /*
        remove & backup source from iframes
        give back source of visible iframes
        */
        if (skipIframe === "false") {
            $('iframe').each(function () {
                if (myClasses(this, skipParent)) {
                    this.setAttribute('src-backup', this.src);
                    var elements = $(this);
                    var elementsoffset = elements.offset();
                    var isvisibleOriginal = parseInt(elementsoffset.top);
                    var isvisible = isvisibleOriginal + loadonposition;
                    if (skipParent.length !== 0) {
                        //skip this iframe
                    } else {
                        if (scrollBottom < isvisible) {
                            this.setAttribute('src', '');
                            this.style.opacity = "0";
                        } else {
                            this.style.opacity = "1";
                        }
                    }
                }
            });
        }

        $("*").each(function () {
            if (myClasses(this, skipAllParent)) {
                //remove & backup background-image from all elements
                if ($(this).css('background-image').indexOf('url') > -1) {
                    var bg = $(this).css('background-image');
                    $(this).attr("background-image-backup", bg);
                    if (importantVC) {
                        $(this).css('cssText', 'background-image: none !important');
                    } else {
                        $(this).css('background-image', 'none');
                    }
                }
                //give back background-image of all visible elements
                var bgbak = $(this).attr("background-image-backup");
                if (bgbak) {
                    var elements = $(this);
                    var elementsoffset = elements.offset();
                    var isvisibleOriginal = parseInt(elementsoffset.top);
                    var isvisible = isvisibleOriginal + loadonposition;
                    if (scrollBottom >= isvisible) {
                        if (importantVC) {
                            $(this).css('cssText', "background-image: " + bgbak + " !important");
                        } else {
                            $(this).css("background-image", bgbak);
                        }
                    }
                }
            }
        });
    });

    //Detect if user scrolled to the image
    $(window).scroll(function () {

        //set visible part of screen
        var scrollBottom = $(window).scrollTop() + window.innerHeight;

        //give back source of visible images
        $('img').each(function () {
            if (myClasses(this, skipAllParent)) {
                var isLoaded = $(this).attr("src");
                var isLoaded2 = $(this).attr("srcset");
                var hasBackup = $(this).attr("srcset-backup");
                var elements = $(this);
                var elementsoffset = elements.offset();
                var isvisibleOriginal = parseInt(elementsoffset.top);
                var isvisible = isvisibleOriginal + loadonposition;
                if (scrollBottom >= isvisible) {
                    if (!isLoaded) { //check if source is not set
                        this.src = this.getAttribute('src-backup');
                        this.className += " fadein";
                        this.style.opacity = "1";
                    }
                    if (!isLoaded2) { //check if source is not set
                        if (hasBackup) {
                            $(this).attr("srcset", hasBackup);
                        }
                    }
                }
            }
        });

        //give back source of visible videos
        if (skipVideo === "false") {
            $('video').each(function () {
                if (myClasses(this, skipAllParent)) {
                    var isLoaded = $(this).attr("src");
                    var isLoaded2 = $(this).attr("srcset");
                    var hasBackup = $(this).attr("srcset-backup");
                    var elements = $(this);
                    var elementsoffset = elements.offset();
                    var isvisibleOriginal = parseInt(elementsoffset.top);
                    var isvisible = isvisibleOriginal + loadonposition;
                    var source = elements.find("source");
                    if (scrollBottom >= isvisible) {
                        if (!isLoaded) { //check if source is not set
                            this.src = this.getAttribute('src-backup');
                            if (this.classList.contains("fadein") === false) {
                                this.className += " fadein";
                            }
                            this.style.opacity = "1";

                            for (i = 0; i < source.length; i++) {
                                source[i].src = source[i].getAttribute('src-backup');
                            }
                        }
                        if (!isLoaded2) { //check if source is not set
                            if (hasBackup) {
                                $(this).attr("srcset", hasBackup);
                            }
                        }
                    }
                }
            });
        }

        //give back source of visible iframes
        if (skipIframe === "false") {
            $('iframe').each(function () {
                if (myClasses(this, skipParent)) {
                    var isLoaded = $(this).attr("src");
                    var elements = $(this);
                    var elementsoffset = elements.offset();
                    var isvisibleOriginal = parseInt(elementsoffset.top);
                    var isvisible = isvisibleOriginal + loadonposition;
                    var hasBackup = $(this).attr("src-backup"); //check if iframe has backup source
                    var found;
                    if (skipParent.length !== 0) {
                        found = $(this).parents().hasClass(skipParent); //look for ignored parent
                    }
                    if (scrollBottom >= isvisible) {
                        if (!isLoaded) { //check if source is not set
                            if (found && skipParent.length !== 0) {
                                //ignored parent was found, so leave it as it is
                            } else {
                                this.src = this.getAttribute('src-backup');
                                this.className += " fadein";
                                this.style.opacity = "1";

                            }
                        }
                    }
                }
            });
        }

        //give back background-image of all visible elements
        $("*").each(function () {
            if (myClasses(this, skipAllParent)) {
                var bgbak = $(this).attr("background-image-backup");
                if (bgbak) {
                    var elements = $(this);
                    var elementsoffset = elements.offset();
                    var isvisibleOriginal = parseInt(elementsoffset.top);
                    var isvisible = isvisibleOriginal + loadonposition;
                    if (scrollBottom >= isvisible) {
                        if ($(this).css('background-image').indexOf('url') === -1) { //check if source is not set
                            if (importantVC) {
                                $(this).css('cssText', "background-image: " + bgbak + " !important");
                            } else {
                                $(this).css("background-image", bgbak);
                            }
                        }
                    }
                }
            }
        });
    });
})(jQuery);

Reached out to the author directly with a code snippet. He thanked me for the contribution and implemented the update. That resolves my issues ??

Thank you!