Color placeholder ✨ #241
Color placeholder ✨ #241
Conversation
|
Cool feature! |
|
This actually would be pretty useful feature! Suggestion: It would be great to use |
|
@AlexandrHoroshih sure, great idea. Done. |
|
@ApoorvSaxena friendly ping 👻 |
README.md
Outdated
| Sometimes image loading takes a long time. For this case, you can add a placeholder color: | ||
|
|
||
| ```html | ||
| <img class="lozad" data-placeholder="red" data-src="image.png" /> |
There was a problem hiding this comment.
use data-placeholder-background instead of just data-placeholder
README.md
Outdated
| @@ -202,6 +202,16 @@ const coolImage = document.querySelector('.image-to-load-first') | |||
| observer.triggerLoad(coolImage); | |||
| ``` | |||
|
|
|||
| ### Large image improvment | |||
|
|
|||
| Sometimes image loading takes a long time. For this case, you can add a placeholder color: | |||
There was a problem hiding this comment.
you can add a placeholder background
README.md
Outdated
| <img class="lozad" data-placeholder="red" data-src="image.png" /> | ||
| ``` | ||
|
|
||
| Lozad set the background of `img` element and users will see the fallback. |
There was a problem hiding this comment.
Set a placeholder background color of img element and users will see the fallback till the image loads.
|
@igorkamyshev will be great to have adjoining test cases accompanied with PR |
|
@igorkamyshev looking forward to merge this PR soon 😃 |
|
@ApoorvSaxena hi, thanks for answer. Sorry for long delay. Now I fix all issues. Please, review it again and give me your feedback. |
Hello! It is a great library, thanks for it. We use it on our site, and I really love it.
We have one corner-case and want to new feature for handle it. Some of our images really big and loading takes a lot of time. Now, we manually set the background for any large image, and users see the placeholder-color for fallback.
I suggest to add this feature to lozad. 🧑💻
Please, review my idea and PR and give me feedback.
I attach demo page with this feature and reeeeeally slow internet imitation.