On page load images above the fold aren't loaded

[tourniquet7]

Lazy loading images on the e-commerce sites I have worked on has greatly increased the page load speed for those pages. There is a problem however. When a user scrolls down on a page, visits another page, then hits the back button they are in the same scroll position but what they see is completely different because the images above their scroll position haven't loaded to fill up the vertical space.

I have created some jQuery that loads all lazy loading imgs, pictures, and videos above the window viewport in order to properly fill out that vertical space. This code needs to run at the end of the page before the closing body tag. It does not help if it runs after $(document).ready();

I will provide the code. It would be great if someone could translate this into vanilla javascript so this code can be included in the readme of this project for developers to use if needed.

`function fixLazyLoad() {

			$('picture source:not(".lazyloaded")').each(function() {
				if (typeof $(this).data('srcset') != 'undefined') {

					var distanceFromTop = $(window).scrollTop() + window.innerHeight;

		  			if ($(this).offset().top <= distanceFromTop && $(this).is(":visible")) {
							$(this).attr("srcset", $(this).data('srcset')).data("srcset","").attr('media', (lazySizesConfig.customMedia[$(this).data('media') || $(this).attr('media')])).addClass('lazyloaded');
					}
				};
			});


		  	$('img.lazyload:not(".lazyloaded")').each(function() {

		  		var distanceFromTop = $(window).scrollTop() + window.innerHeight;

	  			if ($(this).offset().top <= distanceFromTop && $(this).is(":visible")) {
						$(this).attr("src", $(this).data('src')).removeClass('lazyload').addClass('lazyloaded');
				}
			});

			$('video.lazyload:not(".lazyloaded")').each(function() {

				var distanceFromTop = $(window).scrollTop() + window.innerHeight;

	  			if ($(this).offset().top <= distanceFromTop && $(this).is(":visible")) {
						$(this).attr("src", $(this).data('src')).removeClass('lazyload').addClass('lazyloaded');
				}
			});
		}

		fixLazyLoad();

		$(document).ready(function(){
			fixLazyLoad();
		});`

[aFarkas]

Thank you for the idea. There is a lot to digest here:

1. In general this problem shouldn't be there if you do not destroy the bf cache. Check this article.
2. The problem would also not be there if you would follow the readme and style your lazyloading elements accordingly
3. About your script:
   a) You should only react to pageshow e.persisted.
   b) The source elements must not have the class lazyload and are never visible.
   c) You are layout thrashing quite heavily here.
   d) There is a dedicated method unveil which does the proper transformation for you. (without layout thrashing)

I tried to convert your code for fun (without testing it!!!), but would suggest that you try to fix your problem in a different way. In case you can't start with my code:

function fix() {
	// you could also add some abort condition here in case we are at top
	const elements = document.querySelectorAll('img.lazyload, video.lazyload');
	
	elements.forEach(element => {
		if (element.getBoundingClientRect().bottom < 0) {
			lazySizes.loader.unveil(element);
		}
	});
}

window.addEventListener('pageshow', (e) => {
	if (!e.persisted) { // or opposite please check
		fix();
	}
});

[tourniquet7]

Your code works perfectly! I can only style images properly that I personally add the to pages. We have several content creators who want simple instructions and it took awhile for them to start using data-src and lazyload class. This allows things to "just work" without giving them any more restraints or instructions. Thank you so much.