zafree / pilpil Goto Github PK
View Code? Open in Web Editor NEWPilpil - Progressive Image Loading
Home Page: https://zafree.github.io/pilpil
License: MIT License
Pilpil - Progressive Image Loading
Home Page: https://zafree.github.io/pilpil
License: MIT License
Hello!
I have downloaded the source code and it doesn't work when I follow the instructions about how to use the Pilpil
Is it possible to upload the source code to the "http://jsbin.com/"? Is is easier to understand how the sourcecode is built.
Thank you!
When I include the <script>
in the <head>
of a page, it's not working because it executes before the DOM has been parsed ompletely (document.querySelectorAll('.progressiveMedia')
returns an empty array).
With jquery this could easily be handled with $(document).ready(...)
. In plain JS it seems to be trickier though.
id like to ask, how to make the original width and height set inherit to their respective parent? i mean iwouldnt have to put the data attribute anymore, it automatically inherit by its parent
Great plugin, thanks
Hi,
without any formality, i just want to say that ...like you said on description "as seen on Medium."
Unlike this library, the images on Medium's website loads only when user scroll up on them.
On this library, the images first show the blur-canvas and after that the full-size image loads,
but it doesn't speeds up the loading time because the original image also start loading right after the smaller one finished.
I hope you get my point.
what are your thoughts on this? :) ^_^
P.S Sorry for my bad English
For images that are not visible when the script executes (i.e. their parent elements are hidden via CSS), the max-width and max-height attributes of the ratio placeholder are set to 0
permanently (because offset<Width|Height>
are 0 at that time). This results in images permanently being hidden even when their parent container is made visible at some later point.
A typical scenario for this would be image sliders or carousels where only one image is visible at a time. It would be great if pilpil could support this kind of scenario.
A possible solution would be to offer a global method that users of the library can call to recompute widths and heights.
Btw: Really great work!
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.