@maeertin/medialoaded
Version:
A simple utility for checking whether images and/or videos have been loaded.
99 lines (90 loc) • 2.81 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="../index.js"></script>
<title>mediaLoaded</title>
<style>
video,
img {
display: block;
max-width: 100%;
width: 100%;
object-fit: cover;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.aspectRatio {
position: relative;
}
.aspectRatio::before {
content: '';
display: block;
padding-bottom: calc(9 / 16 * 100%);
}
.aspectRatio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="root">
<div class="grid">
<div class="aspectRatio">
<video
src="//www.w3schools.com/html/mov_bbb.mp4"
poster="//source.unsplash.com/1600x900"
playsinline
controls
muted
></video>
</div>
<div class="aspectRatio">
<picture>
<source media="(min-width: 600px)" srcset="//source.unsplash.com/1920x1080" />
<source media="(min-width: 0px)" srcset="//source.unsplash.com/960x540" />
<img src="//source.unsplash.com/1920x1080" alt="" />
</picture>
</div>
<div class="aspectRatio">
<img src="//source.unsplash.com/1500x850" alt="" />
</div>
<div class="aspectRatio">
<img class="preload" src="//source.unsplash.com/960x500" alt="" />
</div>
<div class="aspectRatio preload">
<img src="//source.unsplash.com/960x510" alt="" />
</div>
<div class="aspectRatio">
<img src="//faulty.url.test" alt="" />
</div>
</div>
<h3>".preload" status: <span id="output1">loading...</span></h3>
<h3>All media status: <span id="output2">loading...</span></h3>
</div>
<script>
// Single node as target argument
var node = document.getElementById('root')
var output2 = document.getElementById('output2')
window.mediaLoaded(node, function (instance) {
console.log('#root mediaLoaded instance', instance)
output2.innerHTML = 'loaded'
})
// nodeList as target argument
var nodeList = document.querySelectorAll('.preload')
var output1 = document.getElementById('output1')
window.mediaLoaded(nodeList, function (instance) {
console.log('.preload mediaLoaded instance', instance)
output1.innerHTML = 'loaded'
})
</script>
</body>
</html>