ivopetkov / responsively-lazy Goto Github PK
View Code? Open in Web Editor NEWLazy load responsive images and HTML
Home Page: https://ivopetkov.com/responsively-lazy/
Lazy load responsive images and HTML
Home Page: https://ivopetkov.com/responsively-lazy/
Howdy,
Did some testing and found with JS disabled within the Browser, no images will show.
Windows 7 64bit
Firefox 53.0.2
Opera 45
I can get image to show if "srcset" attribute is removed.
Other than that it looks like a nice script you've put together. Kudos for providing it open source with MIT Licensing.
But before you will add this setting, maybe I can make it manually on mi site?
Hello, I tried your lazyload script. I used vanilla lazyload before, and in vanilla lazyload, there is an option callback_error
that can be used for a fallback function when an image fails to load. Is it possible to do the same with this script? Thank you
I know that this is designed to solve issues using srcset, which isn't supported for background images, but it is hard to justify pulling in two dependencies, one for responsive img tags, and another for background images. Is there some kind of way to adapt this for background images, or provide support for that using another technique?
When a srcset image is specified with a pixel density descriptor instead of a width descriptor as explained here:
https://webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/
or more detailed in the official spec:
https://html.spec.whatwg.org/multipage/embedded-content.html#width-descriptor
the higher resolution image will be removed from srcset.
For example something like this
<img class="responsively-lazy" [...] data-srcset="image/3945799cca93f17f_280x280.jpg, image/[email protected] 2x">
will be transformed into this
<img class="responsively-lazy" [...] srcset="image/3945799cca93f17f_280x280.jpg">
Well today I checked my website on ie 11 and it was not working I mean I couldn't see images.
Turn out to be img.responsively-lazy height was 0 and ie was unable to run your JS I guess where it overwrites height.
so I removed height:0 and now its working fine.
Any specific reason for height 0 ??
I don't know if this is intentional or not but when the screen goes from big to small and the "big" image was already loaded the "small" image is not loaded. I'm using quotes because I have the following scenario:
In Chrome for mobile images are loaded very slow, 1-2 sec when the page have many images. Even if the images are in local cache.
Hi, does it work in horizontally scrollable element when I do not know image aspect ratio?
I have 50 small images, different image aspect ratio on page with horizontal scrolling.
In total they have 250kB and they are 50 requests.
Thanks!
For this project we've got to cycle through a series of images (a series of <img>
tags in a container, cycling through them toggling a hidden
class)
What I can't figure out is how to re-run responsively-lazy against the new elements (which were hidden when it ran). I've tried playing around with a browserified version and trying to make it re-initializable but haven't had much luck.
Maybe a dumb question, but why is the images in the data-srcset
loaded twice?
First thanks for this amazing Script.
There´s only one thing i'm missing. Is it possible to target Retina devices?
Cheers,
Roman
Is there a way to load images in Bootstrap carousel when it start rotating?
For now i use:
$('.carousel').each(function () { $(this).on('slid.bs.carousel', function () { responsivelyLazy.run(); }); });
But it start loading only when rotation stops.
slide.bs.carousel
not an option - image is still hidden.
I've noticed an issue that seems limited to Chrome. When scrolling a page of responsively-lazy images, sometimes the transparent placeholder (srcset) doesn't get swapped out for the image. It seems like the javascript occasionally doesn't fire. I've seen this on a few recent versions of Chrome 5x, but haven't tried rolling back to 49.xx or earlier.
I've whipped up a simple test page. Just load up Chrome and scroll down as normal and wait for a row of blank images. If you scroll them out of view and back into view, they then load.
https://www.harpgallery.com/test.html
Maybe it's a Chrome bug?
Hi @ivopetkov,
when installing the library through npm the code is not at the latest version. Could you please create a new release?
Thank you
Is there any chance to get responsively-lazy for background-images?
This solution has a one unresolved behavior.
Each browser downloads image in src before when plugin switch image in data-src.
In your example each browser download 2000px image and after then decides what to replace and show.
i think that is not very useful to insert a large picture like a fallback.
Try to mention this behavior in readme.md
Hello,
I am looking a way to lazy load the images from instagram basic display api.
I use the code:
<img class="instagram-feed__item__image" data-src="<?php echo $image_url; ?>" alt="<?php echo $item['caption']; ?>" class="responsively-lazy">
But the Image url is like: https://scontent.cdninstagram.com/v/t51.29350-15/133049651_2767029926897156_3167520314147899187_n.jpg?_nc_cat=105&ccb=2&_nc_sid=8ae9d6&_nc_ohc=LbOZsO0i_PsAX_swsGB&_nc_ht=scontent.cdninstagram.com&oh=d7ca6bd41c09130304ad5e6b760a9889&oe=60137C1B
Any idea how to apply lazy load?
Regards,
Dimitris
resposively-lazy does not support CSS Transforms (e.g. scale) with calculations of actual image widths
This can be fixed by using element.getBoundingClientRect().width instead of element.offsetWidth
change
var containerWidth = container.offsetWidth * window.devicePixelRatio;
to
var containerWidth = container.getBoundingClientRect().width * window.devicePixelRatio;
Demo
https://codepen.io/thcreate/pen/700d3a105243db29443d236fcf858626
Hi Ivo.
It is not an issues but I'd like to mention that Google bot uses scrset
over src
and executes JS of course.
So Google bot will not use the default large image in src
but will use the one inserted into srcset
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.