tattica
Version:
Tactical and adaptive asset loading library
79 lines (76 loc) • 3.33 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">
<title>Tattica Demo</title>
</head>
<body>
<div class="wrapper">
<h1>Tattica testing <code>priority</code> feature</h1>
<div class="container">
<img src="https://source.unsplash.com/900x900/?pc" alt="0">
</div>
<div class="container">
<img
data-flag
data-priority="4"
data-src="https://soxcgurce.unsplash.com/900x900/?nature"
data-src-fall="https://source.unsplash.com/900x900/?nature"
onerror="this.src='https://source.unsplash.com/900x900/?nature'"
alt="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?water" data-src-slow="https://source.unsplash.com/900x900/?water" data-src-medium="https://source.unsplash.com/900x900/?water" alt="2">
</div>
<div class="container">
<img data-priority-block="5" data-flag data-src="https://source.unsplash.com/900x900/?car" alt="3">
</div>
<div class="container">
<img data-priority-block="5" data-flag data-src="https://source.unsplash.com/900x900/?nature" alt="1">
</div>
<div class="container">
<img data-priority-block="5" data-flag data-src="https://source.unsplash.com/900x900/?water" alt="2">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?viola" alt="3" data-priority="2">
</div>
<div class="container">
<img data-flag data-src="https://soscurce.unsplash.com/900x900/?neve" alt="1" >
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?pioggia" alt="2" >
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?montagna" alt="3" data-priority="3">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?na" alt="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?wa" alt="2">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?ca" alt="3">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?mausoleo" alt="1" data-block="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?nuvole" alt="2" data-block="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?campagna" alt="3" data-block="1">
</div>
</div>
<style>
.container {
min-height: 100vh;
height: 110vh;
}
</style>
<script src="https://unpkg.com/tattica@0.1.0/dist/tattica.umd.js"></script>
<!-- <script type="module" src="../dist/tattica.js"></script> -->
</body>
</html>