Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color placeholder ✨ #241

Merged
merged 5 commits into from Jul 25, 2020
Merged

Color placeholder ✨ #241

merged 5 commits into from Jul 25, 2020

Conversation

igorkamyshev
Copy link
Contributor

@igorkamyshev igorkamyshev commented Jul 2, 2020

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.

ezgif com-video-to-gif

@Uncleseneca
Copy link

Cool feature!
Can't wait for it!

@AlexandrHoroshih
Copy link

AlexandrHoroshih commented Jul 2, 2020

This actually would be pretty useful feature!

Suggestion: It would be great to use background property instead of background-color or add similar api for background-image. Then it will be possible to also use gradients (and also images) as a placeholders. I think that good gradient might look cooler than just a color

@igorkamyshev
Copy link
Contributor Author

@AlexandrHoroshih sure, great idea. Done.

@igorkamyshev
Copy link
Contributor Author

@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" />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Set a placeholder background color of img element and users will see the fallback till the image loads.

@ApoorvSaxena
Copy link
Owner

@igorkamyshev will be great to have adjoining test cases accompanied with PR

@ApoorvSaxena
Copy link
Owner

@igorkamyshev looking forward to merge this PR soon πŸ˜ƒ

@igorkamyshev
Copy link
Contributor Author

@ApoorvSaxena hi, thanks for answer. Sorry for long delay. Now I fix all issues. Please, review it again and give me your feedback.

@ApoorvSaxena ApoorvSaxena merged commit 8cb90d3 into ApoorvSaxena:master Jul 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants