search

ryanve / response.js

Responsive design toolkit
http://responsejs.com
Other
801 stars 123 forks source link

Lazyload offset #40

Closed microcipcip closed 10 years ago

microcipcip commented 10 years ago

Is there a way to add a offset to the lazy parameter? For example to load the content (expecially imgs) 200px before you reach them in your viewport?

ryanve commented 10 years ago

Great question. To do that you can include a .verge amount in pixels:

{ "lazy":true, "verge":200 }

That commit fixed the default calculation. In 0.7.10 omitting the .verge property will default to a smart guess based on the device size.

verge.inViewport() inspired the property name but a more intuitive name may land in a future release.

microcipcip commented 10 years ago

That was quick! Thank you very much!

fritzweisshart commented 10 years ago

"verge" doesn's seem to work on iOS Safari. Any idea anybody?

ryanve commented 10 years ago

@fritzweisshart What happens? Does it work if you scroll slowly? How much "verge" did you use?

fritzweisshart commented 10 years ago

Thank you for your reply. I found out that on iOS the scroll event is not triggered until scrolling is finished. Only then the image is loaded. No matter how slowly I scroll, and how much "verge" I use. I gave http://luis-almeida.github.io/unveil/ a chance: $("img").unveil(200); does the trick. It works on iOS.

ryanve commented 10 years ago

@fritzweisshart How did you find that out? Try this scroll test. The scroll event fires for every pixel when I scroll slow on my iPhone.