search

ressio / lazy-load-xt

Lazy load XT is a jQuery plugin for images, videos and other media
http://ress.io/lazy-load-xt-jquery/
MIT License
1.36k stars 245 forks source link

Incorrect size loaded with srcset and sizes above 100vw #100

Open faebe opened 7 years ago

faebe commented 7 years ago

This problem occurs with version 1.1.0, version 1.0.6 seems to work just fine.

I'm using lazy-load-xt extra with the srcset plugin. Images have sizes above 100vw, because some are scaled larger than the screen in order to allow certain animations.

HTML example:

<img src="http://mypage.com/images/placeholder.gif" srcset="" data-src="http://mypage.com/900x600.jpg" data-srcset="http://mypage.com/450x300.jpg 450w, http://mypage.com/700x467.jpg 700w, http://mypage.com/1400x933.jpg 1400w, http://mypage.com/900x600.jpg 900w, http://mypage.com/1800x1200.jpg 1800w, http://mypage.com/1440x960.jpg 1440w, http://mypage.com/1920x1280.jpg 1920w, http://mypage.com/2400x1600.jpg 2400w, http://mypage.com/1728x1152.jpg 1728w, http://mypage.com/2800x1867.jpg 2800w" sizes="(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw" class="lazy lazy-hidden">

As you can see, there are sizes above 100vw: (I need those to animate the image over time on smaller screens)

sizes = '(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw'

Version 1.1.0 fails on a 375px wide screen and loads 450x300.jpg. With a image-width of 200vw (=750px on a 375px device) this is way too small. Version 1.0.6 does everything correct and loads 900x600.jpg.