lukeed / lukeed/onloaded

[RFC] Listen to CSS Background Images

Open
#1 0 comments 0 reactions 0 assignees View on GitHub
discuss
Dominant language
JavaScript
Stars
40
Forks
6
PR merge metrics
No merged PRs in 30d

Description

> If this lands, it will be a 2.0 release & thus will be the distinguishing feature between v1 and v2.

Most of the time when I'm trying to do a fair bit of animating, it's never on a `` directly. It's nearly always on a `

` with a `background-image` style property.

In those cases, I'd (presumably) like to know when the image has completely downloaded before I begin the non-critical animation. IMO, it's far worse to have something fly/scale in, only to be partially loaded and/or lag the browser while it tries to pain the image _and_ animate at the same time.

Here's how it would look, I think:

```js
// load all

s' background-images
onloaded('.slide > div', { background:true });

// load the background-images on .container's .slide nodes
onloaded('.container', { background:'.slide' });
```

I'm only guessing, but doing so may add roughly ~100-200 bytes, which is a significant increase since `1.0` is only 350 bytes.

Please cast your vote below 😆

[![](https://m131jyck4m.execute-api.us-west-2.amazonaws.com/prod/poll/01BPD94VYQWJNT4ARB2Z7D4XJK/Yes!!)](https://m131jyck4m.execute-api.us-west-2.amazonaws.com/prod/poll/01BPD94VYQWJNT4ARB2Z7D4XJK/Yes!!/vote)
[![](https://m131jyck4m.execute-api.us-west-2.amazonaws.com/prod/poll/01BPD94VYQWJNT4ARB2Z7D4XJK/I'd%20still%20use%201.0%20)](https://m131jyck4m.execute-api.us-west-2.amazonaws.com/prod/poll/01BPD94VYQWJNT4ARB2Z7D4XJK/I'd%20still%20use%201.0%20/vote)
[![](https://m131jyck4m.execute-api.us-west-2.amazonaws.com/prod/poll/01BPD94VYQWJNT4ARB2Z7D4XJK/No%20preference)](https://m131jyck4m.execute-api.us-west-2.amazonaws.com/prod/poll/01BPD94VYQWJNT4ARB2Z7D4XJK/No%20preference/vote)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing the proposed onloaded examples for selecting elements and background images, then inspect the repository's current image-loading behavior. Done means defining and implementing agreed support for CSS background-image loading without undermining the library's 350-byte goal or its versioning expectations.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.