240 lines
9.4 KiB
HTML
240 lines
9.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
<title>lazyload</title>
|
|
|
|
<link rel="stylesheet" href="../css/flickity.css" />
|
|
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
|
|
.carousel {
|
|
border: 1px solid;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.carousel__image {
|
|
display: block;
|
|
margin-right: 20px;
|
|
height: 400px;
|
|
max-width: 100%;
|
|
min-width: 200px;
|
|
background: #DDD;
|
|
transition: opacity 0.8s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.carousel__image.flickity-lazyloaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
.carousel__cell {
|
|
width: 80%;
|
|
height: 400px;
|
|
margin-right: 20px;
|
|
background: #DDD;
|
|
}
|
|
|
|
.carousel__cell__image {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>lazyload</h1>
|
|
|
|
<div class="carousel js-flickity" data-flickity-options='{ "lazyLoad": true }'>
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
|
</div>
|
|
|
|
<div class="carousel js-flickity"
|
|
data-flickity-options='{ "lazyLoad": 1, "wrapAround": true }'>
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
|
</div>
|
|
|
|
<div class="carousel js-flickity"
|
|
data-flickity-options='{ "lazyLoad": true }'>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" /></div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
|
|
</div>
|
|
|
|
<div class="carousel carousel--jq">
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="foo.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
|
</div>
|
|
|
|
<h2>srcset</h2>
|
|
|
|
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
|
<img class="carousel__image"
|
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=718"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=718 720w,
|
|
https://picsum.photos/360/270/?image=718 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px"
|
|
/>
|
|
<img class="carousel__image"
|
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=517"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=517 720w,
|
|
https://picsum.photos/360/270/?image=517 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px"
|
|
/>
|
|
<img class="carousel__image"
|
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=696"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=696 720w,
|
|
https://picsum.photos/360/270/?image=696 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px"
|
|
/>
|
|
<img class="carousel__image"
|
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=56"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=56 720w,
|
|
https://picsum.photos/360/270/?image=56 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px"
|
|
/>
|
|
<img class="carousel__image"
|
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1084"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=1084 720w,
|
|
https://picsum.photos/360/270/?image=1084 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px"
|
|
/>
|
|
<img class="carousel__image"
|
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1080"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=1080 720w,
|
|
https://picsum.photos/360/270/?image=1080 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px"
|
|
/>
|
|
</div>
|
|
|
|
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=718 720w,
|
|
https://picsum.photos/360/270/?image=718 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px" />
|
|
</div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=517 720w,
|
|
https://picsum.photos/360/270/?image=517 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px" />
|
|
</div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=696 720w,
|
|
https://picsum.photos/360/270/?image=696 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px" />
|
|
</div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=56 720w,
|
|
https://picsum.photos/360/270/?image=56 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px" />
|
|
</div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=1084 720w,
|
|
https://picsum.photos/360/270/?image=1084 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px" />
|
|
</div>
|
|
<div class="carousel__cell">
|
|
<img class="carousel__cell__image"
|
|
data-flickity-lazyload-srcset="
|
|
https://picsum.photos/720/540/?image=1080 720w,
|
|
https://picsum.photos/360/270/?image=1080 360w"
|
|
sizes="(min-width: 1024px) 720px, 360px" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery -->
|
|
<script src="../bower_components/jquery/dist/jquery.js"></script>
|
|
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
|
|
<!-- dependencies -->
|
|
<script src="../bower_components/get-size/get-size.js"></script>
|
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
|
<!-- Flickity -->
|
|
<script src="../js/cell.js"></script>
|
|
<script src="../js/slide.js"></script>
|
|
<script src="../js/animate.js"></script>
|
|
<script src="../js/flickity.js"></script>
|
|
<script src="../js/drag.js"></script>
|
|
<script src="../js/prev-next-button.js"></script>
|
|
<script src="../js/page-dots.js"></script>
|
|
<script src="../js/player.js"></script>
|
|
<script src="../js/add-remove-cell.js"></script>
|
|
<script src="../js/lazyload.js"></script>
|
|
|
|
<script>
|
|
|
|
var $jQCarousel = $('.carousel--jq').flickity({
|
|
lazyLoad: true
|
|
});
|
|
|
|
$jQCarousel.on( 'lazyLoad', function( event, cellElem ) {
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|