https://github.com/component/onload

Add onload transitions to DOM elements (fade in images etc)
https://github.com/component/onload

Last synced: 6 months ago
JSON representation

Add onload transitions to DOM elements (fade in images etc)

• Host: GitHub
• URL: https://github.com/component/onload
• Owner: component
• Created: 2013-03-27T23:58:18.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2013-08-21T17:32:54.000Z (over 12 years ago)
• Last Synced: 2025-07-31T23:26:44.367Z (8 months ago)
• Language: JavaScript
• Size: 67.4 KB
• Stars: 26
• Watchers: 6
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

          

# onload

  Add onload transitions to DOM elements that

  emit "load" events such as images by adding

  ".preload" and ".onload" classnames accordingly.

## Installation

    $ component install component/onload

## Example

 Example js:

```js

var onload = require('onload');

var img = document.querySelector('img');

onload(img);

```

 Example css:

```css

img {

  opacity: 1;

  -webkit-transition: opacity 300ms;

  -moz-transition: opacity 300ms;

  transition: opacity 300ms;

}

img.preload {

  opacity: 0;

}

```

## API

 - `onload(el)`

## Images

  Images which are `.complete` are immediately

  assigned ".onload" so that effects can be applied

  to non-cached images only.

## License

  MIT