Skip to content

Instantly share code, notes, and snippets.

View arnoldfederis's full-sized avatar

Arnolfo Federis arnoldfederis

View GitHub Profile
server {
listen 80;
root /var/www/html;
index index.php index.html index.htm index.nginx-debian.html;
server_name example.com;
location / {
try_files $uri $uri/ =404;
}
/* SCSS */
@import "~progressive-image-lazyload.js/src/scss/progressive-image";
/* JavaScript */
import 'progressive-image-lazyload.js'
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressive-image-lazyload.js@1.0.4/dist/progressive-image-lazyload.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/progressive-image-lazyload.js@1.0.4/dist/progressive-image-lazyload.js"></script>
<figure class="graf-figure">
<div class="aspectRatioPlaceholder">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia" data-width="1920" data-height="1080">
<img class="progressiveMedia-thumbnail" data-thumb="https://i.imgur.com/glCxppa.png" alt="progressive-image-lazyload">
<canvas class="progressiveMedia-canvas"></canvas>
<img class="progressiveMedia-image" data-src="https://i.imgur.com/o4aKBEH.png" alt="progressive-image-lazyload">
</div>
</div>
</figure>