Skip to content

Instantly share code, notes, and snippets.

@khoipro

khoipro/sample.html

Last active November 2, 2024 13:43
Show Gist options
  • Save khoipro/8d0ca4256d165408745b9ebd7ef1df52 to your computer and use it in GitHub Desktop.
Save khoipro/8d0ca4256d165408745b9ebd7ef1df52 to your computer and use it in GitHub Desktop.
Download ZIP
Using lazysizes to improve image load. - Sample by CODETOT @khoipro
Raw
sample.html
<!doctype html>
<html lang="en">
<head>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" as="script" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js">
</head>
<body>
<div class="in-first-view">
<img src="image-1.jpg" width="640" height="480" alt="">
</div>
<div class="out-first-view">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
data-src="image-2.jpg"
class="lazyload"
width="640"
height="480"
alt=""
>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment