LazyLoad Kullanımı Ve Örnek Kodlar
12 Eylül 2021 / 13:16
Burak
Merhabalar,
Bir projenizd lazyload kullanmak isterseniz aşağıdaki adımları izlemeniz yeterlidir.
Resim kodlarını aşağıdaki şekilde revize etmeniz gereklidir
|
1 |
<img class="lazy" src="loading_resmi.jpg" data-original="asil_gosterilecek_resim_adresi.jpg"> |
En son adım olarak aşağıdaki kod kütüphanelerini sisteme eklemeniz yeterlidir
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script src="js/jquery.js"></script> <script type="text/javascript" charset="utf-8"> $(function () { $(".lazy").lazyload(); }); $(function () { $("#artan_btn").click(function () { $(".lazy").lazyload(); } ); $("#azalan_btn").click(function () { $(".lazy").lazyload(); } ); }); </script> <script src="js/jquery.lazyload.js"></script> |
Dosyaları buradan indirebilirsiniz.
Bir sonraki yazıda görüşünceye kadar bol sorgulu günler dilerim.
++
Eğer eklenti olmadan lazy load ve asyc yükleme yapmak isterseniz img tağııza aşağıdaki kodları eklemeniz yeterlidir.
|
1 |
decoding="async" loading="lazy" |
Bu internet explorer ( Kullanan varmı ki 🙂 ) hariç her browserda çalışmaktadır
Etiketler: lazyload, lazyload examples, lazyload kullanımı, lazyload nasıl kullanılır, Lazyload örneği
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın