Setup lazy image loading plus setting placeholder to images.
Using Lozad and https://placehold.co, apply quickly without downloading anything.
Head
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js" > </script >
Image
<img class="lozad" data-src="image.png" src="https://placehold.co/300x200/112/fff?text=BoldCodes%0ALoading%20image%20..." >
footer
<script >
const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer. Observe();
</script >
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js" > </script >
Image
<img class="lozad" data-src="image.png" src="https://placehold.co/300x200/112/fff?text=BoldCodes%0ALoading%20image%20..." >
footer
<script >
const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer. Observe();
</script >
Views 177
Downloads 42
CodeID
DB ID
ANmarAmdeen
610
Revisions
v1.0
Saturday
February
10
2024