nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2025-01-11 04:21:20 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

Add lazy load to Product List Page

Browse source
This commit is contained in:
Moe Poi ~ 2021-09-26 20:51:24 +07:00
parent 95a382d105
commit 2c51c04448
1 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
product-list.html
View file

@ -54,11 +54,12 @@
color: white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.webp"
<a href="/"><img alt="Banner" class="navbar-brand lazyload" height="80" src="assets/logo_transparent.webp"
style="margin-top: 0%;" width="80"></a>
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler"
@ -138,7 +139,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_1.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_1.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -155,7 +156,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_2.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_2.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -172,7 +173,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_3.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_3.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -190,7 +191,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_4.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_4.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -207,7 +208,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_5.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_5.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -224,7 +225,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_6.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_6.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -242,7 +243,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_7.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_7.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -260,7 +261,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_8.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_8.webp">
</div>
<div class="col-md-8">
<div class="card-body">
@ -277,7 +278,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid" src="./assets/Product_9.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_9.webp">
</div>
<div class="col-md-8">
<div class="card-body">