Lazy Load İle Sayfalara Resim Yükleme

Kullanılan Javascript Kütüphanesi : http://www.appelsiini.net/projects/lazyload

1. Jquery ve LazyLoad kütüphanelerini body kapanış tagından önce ekliyoruz.

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

2. Resimler  aşağıdaki şekilde <img> tagında yazıyoruz.
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">

3. Son olara aşağıdaki jquery komutunu çalıştırıyoruz.

$("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/

Asp.Net Jquery Ajax ile Post

Client Side Kodları

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js'></script>
<script type="text/javascript">
    function Calistir() {
        var conString = $('#txtSqlConString').val();
        var queryString = $('#txtQueryString').val();
        //alert('@Url.Action("SqlCalistir", "Home")')
        $.ajax({
            type: "POST",
            url: '@Url.Action("SqlCalistir", "Home")',
            contentType: "application/json; charset=utf-8",
            data: "{'sqlCommand':'" + queryString + "','sqlConnection':'" + conString + "'}",
            dataType: "json",
            success: function (msg) {
                alert(msg);
            },
            error: function () {
                alert('Error!');
            }
        });
    }
</script>

Server Side Kodları

[HttpPost]
       public JsonResult SqlCalistir(string sqlCommand,string sqlConnection)
       {
           string result = string.Empty;
           DataTable dt = new DataTable();
           using (OleDbConnection con = new OleDbConnection(sqlConnection))
           {
               using (OleDbCommand cmd = new OleDbCommand(sqlCommand, con))
               {
                   con.Open();
                   OleDbDataAdapter da = new OleDbDataAdapter(cmd);
                   da.Fill(dt);
                   result =DataTableToJSONWithJSONNet(dt);
                   con.Close();
               }
           }
           return Json(result, JsonRequestBehavior.AllowGet); 
       }

private string DataTableToJSONWithJSONNet(DataTable table)
       {
           string JSONString = string.Empty;
           JSONString = Newtonsoft.Json.JsonConvert.SerializeObject(table);
           return JSONString;
       }