Support » Plugin: Zedna WP Image Lazy Load » Possible fix for slideshow style pages

  • Hello!
    I noticed a site using your plugin had issues with not loading images. It seemed to be that the scroll was not detected because the page had a slideshow format that did not trigger the window.scroll() event. For example, here.
    A possible fix for this could be replacing:
    window.scroll(function(){
    with
    $(window).on("scroll wheel", function () {
    You also might want to check out the window.scroll() optimization here.
    If you like both of those ideas, here is an updated version of your JS file:

    /*
      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 () {
    			console.log("image");
    			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);
    						}
    					}
    				}
    			}
    		});
    	});
    
     	var scrolling = false;
     
    	//Detect if user scrolled to the image
    	$(window).on("scroll wheel", function () {
    		scrolling = true;
    	});
    	setInterval( function() {
    	  if ( scrolling ) {
    		scrolling = false;
    		// Do your thang!
    		//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);
    

    Thanks for the great plugin, cheers.

  • You must be logged in to reply to this topic.