1. Jquery ve LazyLoad kütüphanelerini body kapanış tagından önce ekliyoruz.
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>Burada classımız "lazy", src özelliği yerine de "data-original" özelliğimizi kullanıyoruz.
<img class="lazy" data-original="img/example.jpg" width="640" height="480">$("img.lazy").lazyload();TÜM KODLAR AŞAĞIDAKİ GİBİDİR
<html>
<head>
<title>Lazy Load</title>
<style>
body {
text-align: center;
}
.container {
width: 660px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<img class="lazy" data-original="http://www.nkfu.com/wp-content/uploads/2016/05/romantik-resimler-3.jpg" width="640" height="480">
<img class="lazy" data-original="https://guzelresimler.info/content/photos/6010/bi/14-subat-sevgililer-gunu-resimleri-56a7faaf28a2c.jpg" width="640" height="480">
<img class="lazy" data-original="http://www.sendeyim.net/uploads/resim-galerisi/romantik-resimler_191346.jpg" width="640" height="480">
<img class="lazy" data-original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsV8qI3IAjyTqU04J6f7ApitqFU7-xqswDCozS_HeOy0x_Ti648IrPgJbHA8R7F-MhqHa6tBQ7UKpEL0ORXR5A5m0iLS1AAG4XpPXiBib10fM4rcxG62OyjYbLfrN_oagsxfU29WlzcE/s1600/jaguar+hd+2013+resimler+rooteto.jpg" width="640" height="480">
<img class="lazy" data-original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLzxwyKGDRdoJn9RvWKvRQ1f_EqS-fvyXAwkeclfqbLEyTNg7_V5KBoe-v3PXnNN42rSg62rQSvdMTCBNxl5Yujwa-77qn8QHoplLHa410I1Ubltpf4w76_c_TS_-O_gXwZ6vFJahUrg/s1600/enchanted+forest+2013+resimler+rooteto.jpg" width="640" height="480">
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$("img.lazy").lazyload();
</script>
</body>
</html>
Kaynak: https://www.sitepoint.com/lazy-loading-images-not-really-annoy-users/
