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

Ability to lazy load background images defined in css #442

Open
treyrich opened this issue Mar 4, 2020 · 1 comment
Open

Ability to lazy load background images defined in css #442

treyrich opened this issue Mar 4, 2020 · 1 comment

Comments

@treyrich
Copy link

treyrich commented Mar 4, 2020

Hi, love the library! I was wondering whether there might be a possible solution to lazy load the background images defined in CSS by using a default image? So what I mean by that is that we would define a default image in the template, and then when the lazy load gets fired instead of switching out the background-image with inline CSS, could we just remove the background-image defining the default and let the site's CSS take over? This would allow for much easier handling of responsive background images, and would remove a lot of unnecessary code from our javascript.

My proposal would be that we could simply do:

<div [defaultImage]="defaultImage" class="some-class"></div>
<style type="text/css">
.some-class {
    background-image: url('http://example.com/my/image.jpg');
}
</style>

So the defaultImage would be shown until time for the lazy loading to take place, at which point it would simply be removed and the CSS would take over.

@tjoskar
Copy link
Owner

tjoskar commented Mar 7, 2020

Thanks for your kind words. I agree that it should be posible. Let's continue the discussion in #444

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

No branches or pull requests

2 participants