Possible fix for slideshow style pages

  • spanomaly

    (@spanomaly)


    4 years, 4 months ago

    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.

  • The topic ‘Possible fix for slideshow style pages’ is closed to new replies.