6 ms·
Lazy load responsive images
- hakanito 11y agoWhy do you have to specify the padding-bottom? Is it the image ratio (as 16:9 = 56.25%)? In that case, it would practically render the plugin useless for sites with many images with unknown size.
- ivopetkov 11y agoYou can read about the padding-bottom technique at http://alistapart.com/article/creating-intrinsic-ratios-for-video http://alistapart.com/article/creating-intrinsic-ratios-for-... It helps you preserve space for the image and prevents reflowing. If you have many images with unknown sizes there will be massive reflowing and the library can be tweaked to support that too if you really want it.
- pqdbr 11y agoThis would be awesome. At the same time, one could use something like ImageMagick to find out the dimensions of the picture and set this ratio programatically (http://stackoverflow.com/questions/16266933/rmagick-how-do-i-find-out-the-pixel-dimension-of-an-image http://stackoverflow.com/questions/16266933/rmagick-how-do-i...)
- ivopetkov 11y agoYes, server languages can do this job easily.
- amelius 11y agoNo description of how it works?
- beyti 11y agoIt is specified, read carefully maybe? link: http://ivopetkov.com/b/lazy-load-responsive-images/ http://ivopetkov.com/b/lazy-load-responsive-images/
- edpichler 11y agoI changed the window size and it's always the same image (same px). Is it right?
- ivopetkov 11y agoIf you are using a browser that does not support the srcset attribute, the default image will be loaded, and no magic will happen. Can you please tell me what your device, browser and window width are.
- edpichler 11y agoChrome in a large screen.
- riquito 11y agoYou must reload the page, it doesn't change at runtime.
- ivopetkov 11y agoActually, it does. If the image size increases, a higher quality version will be loaded if available.
- riquito 11y agoThen I have to assume that I have the same problem of edpichler (Firefox 40, Ubuntu) (or I don't understand the purpose of the demo)
- bshimmin 11y agoIt seems to work - for me, in Chrome 44 on a Mac, at least - if you start with a mobile-width browser and then resize the window wider. Resizing from large to small doesn't seem to work.
- edpichler 11y ago
- rattler 11y agoAnother alternative: https://github.com/Kyoushu/Pufferfish.js https://github.com/Kyoushu/Pufferfish.js
- ivopetkov 11y agoA big drawback of Pufferfish.js is that images are not indexable by Google. That's not the case with ResponsivelyLazy.js. It works great in search engines, social networks and read-it-later tools.
- Moter8 11y agohttps://imgrush.com/LDCji9m6iqcm.mp4 https://imgrush.com/LDCji9m6iqcm.mp4 -- Demo page loading for me. Not good at all, nothing happens until it's completely loaded.
- ivopetkov 11y agoThis is the code for the library: <script async src="responsivelyLazy.min.js"></script> No images are visible until the library file loads. If you want you can inline the js code.
- callahad 11y agoIf you primarily care more about responsive images than about lazy loading, the Picturefill polyfill (https://github.com/scottjehl/picturefill https://github.com/scottjehl/picturefill) is a great option. It's a strict polyfill of the picture / srcset standards, which already have broad, native browser support: http://caniuse.com/#search=picture|srcset http://caniuse.com/#search=picture|srcset
- gondo 11y agoit would be worth to mention in the README that this is only for browsers what support srcset attribute
- ivopetkov 11y agoThanks.
- toddmorey 11y agoThis is the clever bit: - The data:image in the srcset attribute shows transparent image and prevents loading the image in the src attribute in modern browsers - The image in the src is attribute is used if the browser does not support the srcset attribute or when the page is scanned by social networks and read-it-later tools.
- ivopetkov 11y agoThank you.
- cyberpanther 11y agoLazy loading is a waste of time in my opinion. Yes it can save bandwidth but it actually creates an awful user experience. If you have a bunch of images you don't want to wait to load them until in view especially on a slow connection. If you lazy load the images then that means every time the user scrolls they have to wait for an image. No one is going to wait for your image to load, so they will scroll on. You then cause a bottleneck in your javascript because the user is scrolling and you are using JS to download images which is not optimal. The experience you want is to load the first image and then load then next image before the user gets to it so that it is ready when the user scrolls. Our browsers do a great job of this already. Don't reinvent the wheel. Our browsers have been optimized to download images the right way. And if you want to save bandwidth then use responsive images and let the browser determine the best size to download. I've implemented lazy load on mobile and learned this first hand. I thought I needed lazy load, but to my surprise, the browser actually knows how to load images the right way. My app actually had less jank and loaded images faster when I left the images up to the browser. Stop over engineering image loading please :-)
- rorykoehler 11y agoI often find myself first scrolling once to the bottom of the page before browsing lists of images if lazy load is implemented.
- ivopetkov 11y agoUsually when I am on a slow mobile connection, I open a lot of tabs. In this case, the benefits of lazy loading are clearly visible. I agree it will be great to load all images, and it will be awesome if we can detect in JavaScript there is available bandwidth and preload the images that are below the fold.
- cyberpanther 11y agoAgain even if you could detect bandwidth, you wouldn't want to do this because the current bandwidth is not a prediction of the future bandwidth. So then you get into a game of trying to predict bandwidth which is a fools game. I think even Google stop trying to predict bandwidth with Android.
- antocv 11y agoWow such magic. /s
- petulla 11y agoNeeds to support multiple image types (webp) to really be a better library.
- Tepix 11y agoWhat's disappointing is that with JavaScript disabled, it doesn't load images at all.
- callum85 11y agoAre you sure about this? Doesn't look likely from the code sample.
- ivopetkov 11y agoIf the browser is "modern" the blank image in the srcset will be loaded, not the image. And then nobody will load the correct image version. This is the problem i think.
- ivopetkov 11y agoIts fixable and will be great update. Thanks.
- jp_sc 11y agoA polyfill for srcset aleady exist: http://scottjehl.github.io/picturefill/ http://scottjehl.github.io/picturefill/
- joshribakoff 11y ago> This is the source of the best lazy loading implementation available. How can this claim to be the "best" when it's browser support is barely over 50%? Here's the one that I feel is "best" after trying many, it supports IE7, which is effectively 100% browser support as far as I'm concerned. https://github.com/dinbror/blazy https://github.com/dinbror/blazy
- ivopetkov 11y agoThe browser support is currently 62% and rising, and a high-quality image can be shown on "not modern" browsers. So in terms of showing quality images the best possible way the support is almost 100% (we already discussed the case with the disabled JavaScript).
- peterchon 11y agoYou should really include a non-zipped js as well.
- ivopetkov 11y agoMaybe you mean non-minified. You can find it at https://github.com/ivopetkov/responsively-lazy/ https://github.com/ivopetkov/responsively-lazy/
- hussong 11y agoI just tried this on an iPhone, using Safari and Chrome, and it's always loading the 2500px images. Am I missing something?
- exodust 11y agoI've just noticed this demo exposes a Firefox bug with image scaling that I'm quite surprised to see. Not related to lazy loading, but may be of interest. Bug: When the same image is found elsewhere on the page, Firefox doesn't bother using smooth interpolation when downscaling. [Edit - workaround is to avoid cache, as in cat.jpg?01 ; cat.jpg?02 ] Look at the cat's whiskers, they look rough in the smallest image. They should look smooth. So using Firebug I removed all other images on the page except the first smallest version. Hey presto, the whiskers are suddenly smooth. http://ivopetkov.github.io/responsivelyLazy/ http://ivopetkov.github.io/responsivelyLazy/ Of course, IE is a lot worse - its scaling is rough all the time regardless.
- codedokode 11y agoI think the problem of lazy loading should be solved by browser vendors (maybe adding some new attribute on img). And it's sad that it doesn't work without JS. Cannot we fix this by using noscript tag?
- ivopetkov 11y agoIt will be great if browsers do this. And yes, the noscript tag is a valid solution.