Support » Plugin: Zedna WP Image Lazy Load » Skip-lazy-load class on parent not working after update from 1.6.1 to 1.6.3.2

  • Resolved Julix

    (@julix91)


    After the update a section that relied on skipping lazy load via class on the parent now breaks (lays out incorrectly) and I think I know why.

    Specifically logic equivalent of this:

    
            if (skipAllParent.length > 0 && $this.parents().hasClass(skipAllParent) ) {
                // skip
            }
    

    has been replaced by this:

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

    which you’ll note checks only the className of image – not its parents – which it should (given the name skipAllParents).

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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 2 months, 2 weeks ago by Julix. Reason: format didn't work
    • This reply was modified 2 months, 2 weeks ago by Julix. Reason: format still didn't work
    • This reply was modified 2 months, 2 weeks 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.wordpress.org/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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.