[Support request] Lazy Load Img data-size: auto ?

[Mr McMarry]

Hello

when I visit the post page so the lazy loading image size is 640×480 which is been set by img size but i dont want that i want to make an img with the same size of <noscript> img means main img when the main image loads and the lazy load img take its place and then when main img is loaded so it just jump back which i dont like

Images :

and the lazy load img :

[David]

Hi there, which lazy load plugin did you opt for? Is there not an option within that to define the auto sizing?

[Mr McMarry]

Nah BTW BJ Lazy Load

[David]

Been looking into how to change the lazy load image size but couldn’t see an easy solution and the support for the plugin is non existent. You could always set your images to a max width of 640px, not ideal but would fix the issue.

[Mr McMarry]

https://github.com/aFarkas/lazysizes

https://generatepress.com/forums/topic/suggestion-for-generate-press-premium/

https://generatepress.com/forums/topic/featured-image-markup-on-archives/

[Mr McMarry]

This could help ?

[Tom]

I’m not seeing a jump? Is it happening on the home page?

Why not make the placeholder image the same size? Does it cause problems?

[Mr McMarry]

Every image has different height size width is 640 which is not a problem but height is a problem

[David]

I can’t see a way of getting the placeholder image to take on the size of the image that is yet to be loaded. It is a problem when image sizes vary. But as Tom says i can’t see the jump on most pages as it loads so fast.

Won’t fix the problem but may ease it is this article for fading them in:

https://davidwalsh.name/lazyload-image-fade

The attribute the lazy loader is using in your case is: data-lazy-srcset

[Mr McMarry]

Please correct me if i am wrong

Added :

CSS

img {
	opacity: 1;
	transition: opacity 0.3s;
}

img[data-lazy-srcset] {
	opacity: 0;
}

Javascript

[].forEach.call(document.querySelectorAll('img[data-lazy-srcset]'), function(img) {
				img.setAttribute('srcset', img.getAttribute('data-lazy-srcset'));
				img.onload = function() {
					img.removeAttribute('data-lazy-srcset');
				};
			});

but nothing works opacity is still 0

[David]

I can’t see either the code on the site or the lazy loader images? Have you removed this function now?

[Mr McMarry]

Enabling Again

[David]

hmmm…. would need some re-coding, but looking at this method (sorry) it won’t work as it would effect the lazy placeholder image as well. May need to look for an alternative lazy load solution.

[Mr McMarry]

Np Lets make it Happen 🙂

[David]

I’ll let you know if i find any better solutions 😉

[Author]

Posts