search

alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
http://alvarotrigo.com/fullPage/
GNU General Public License v3.0
35.26k stars 7.3k forks source link

Lazy load for picture element/srcset/sizes #2355

Closed davidpiendl closed 7 years ago

davidpiendl commented 7 years ago

Hi,

is it possible to add support for srcset and sizes for responsive images using the <img> or <picture> element?

Best regards David

alvarotrigo commented 7 years ago

I guess you can do that using media queries? What exactly is the issue?

davidpiendl commented 7 years ago

It's about lazyloading the images. By using srcset="" and sizes="" the browser looks for the best image size and loades the image immediately. This mechanism is executed although fullpage.js is set to lazyload the images via data-src. Therefore fullpage.js should be extended for maybe "data-sizes" and "data-srcset" i guess.

Thank you.

alvarotrigo commented 7 years ago

@EarlofArgyle why can't you just do the following? 

<img data-src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" />
davidpiendl commented 7 years ago

@alvarotrigo because the browser immediately looks for the best fitting image (in the srcset) and loads it, ignoring the data-src attribute and the lazy load technique in the script and creates an own src attribute. The lazy loading has NO effect. It's even bad, because the image, which was chosen by the browser, got overwritten with the one defined in data-src. It's a problem with img and picture/source element as well.

alvarotrigo commented 7 years ago

Is there any lazy loading library you know that deals with this issue?

davidpiendl commented 7 years ago

Yeah this one https://github.com/aFarkas/lazysizes. But i would rather try to use only one library (fullsize.js). Lazysizes calculates the sizes attribute as well, but its not really performant, certainly not if you have a lot of images in your longpage. It monitors the page for changes via CSS/JS or scrolling which is not necessary for fullpage, because you have your own triggers.

davidpiendl commented 7 years ago

Hey there,

do you have any news? Maybe I can contribute a solution to your project. I can try a simple solution with data-sizes and data-srcset and test it in different browsers.

Best regards David

alvarotrigo commented 7 years ago

No updates I'm afraid. Didn't have time to look into it. Feel free to provide a pull request if you find a solution.

alvarotrigo commented 7 years ago

Fixed in the dev branch 2.9.4

alvarotrigo commented 7 years ago

Fixed in the latest release 2.9.4

ibrokemypie commented 7 years ago

any chance you could give a quick explanation of this? i want able to get it working in my brief testing...

Sent from my HTC MSM8996 for arm64 using FastHub

alvarotrigo commented 7 years ago

See the docs regarding the lazy loading technique.

ibrokemypie commented 7 years ago

It doesnt seem to mention how to lazy load with tags, as data-srcset doesnt seem to work

alvarotrigo commented 7 years ago

@ibrokemypie data-srcset should be working. Please make sure to use the latest fullpage.js version 2.9.4

ibrokemypie commented 7 years ago

can confirm it is not working on firefox nightly with version 2.9.4 Provided data-srcsets for jpg and png, and set the src to a webp which firefox does not support, no image shows. Remove the data- prefixes and it works fine.

alvarotrigo commented 7 years ago

@ibrokemypie Can you please provide an isolated reproduction of the issue in jsfiddle or codepen?

ibrokemypie commented 7 years ago

@alvarotrigo https://jsfiddle.net/ibrokemypie/xmbguzt3/7/ obviously I wouldnt be using flif as the base image source, but I used that as the example since falling back to that wont work on any browser, therefore the image will only show if the sources are utilized.

alvarotrigo commented 7 years ago

@ibrokemypie yeah I see. That's because you are not using <img data-srcset but instead using <source data-srcset . Feel free to open a new issue for this.

BenRacicot commented 6 years ago

Hey @alvarotrigo I was confused about this as well and wasnt able to find the documentation for the proper picture element's src.

I was able to lazy load images and video for anyone else who wants to take a look here: codepen.io/BRacicot/pen/JpLmqo

Thanks as always.

alvarotrigo commented 6 years ago

@BenRacicot this is a bug that has been solved in the development version. Feel free to use that one until it is merged into a new release.

BenRacicot commented 6 years ago

Hey @alvarotrigo this dev version works! However where I am using fullpage-extensions the error persists. Is there an updated version of the extensions file?

alvarotrigo commented 6 years ago

Is there an updated version of the extensions file?

There will be a major release next week. Version 3 of fullpage.js, which gets rids of jQuery! The issue should be fixed there in both files.