Onload
Add onload transitions to DOM elements (fade in images etc)
Install / Use
/learn @component/OnloadREADME
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:
var onload = require('onload');
var img = document.querySelector('img');
onload(img);
Example 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
Related Skills
node-connect
354.3kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
112.3kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
354.3kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
354.3kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
