Hi Team,

Just want to know that the following thing is can be done by using Javascript - Ajax call.

In my web application, there are posts that load on the home page created by users.

So like a Facebook post, it shows the Employee Name, Department, and the post (image) that he posts in this system.

This data collected code I wrote in the ActionResult in Home Controller.

But seems when It loads, the page loading time is increased.

How to display a loading image.

This is the code

function Announcements() {

  try {
    $.ajax({
      url: '../Home/Announcements',
      type: 'POST',
      dataType: 'json',
      cache: false,
      async: false,
      data: {},
      success: function (data) {
        if (data.Success == true) {

          for (var i = 0; i < data.Announcements; i++) {

            alert("Annoncementsdadsa")
          }

          $("#Announcements").append(data.Announcements);
        }
      }
    });
  } catch (err) {
    console.log(err.message)
  }
}

This is the JsonResult

public JsonResult Announcements() {
  try {
    DateTime twoDaysAgo = DateTime.Today.AddDays(-1);

    List < NewsShareViewModel > smcNews = new List < NewsShareViewModel > ();

    smcNews = (from n in db.NewsShare join e in db.CreateEmployee on n.Created_By equals e.Id join d in db.CreateDepartment on e.DepId equals d.Id where n.CreatedDate > twoDaysAgo select new NewsShareViewModel {
      Id = n.Id,
        UserName = e.EmpName,
        Department = d.Department,
        Message = n.Comment,
        UserId = n.Created_By,
        CreatedDate = n.CreatedDate.ToString()
    }).ToList();

    return Json(new {
      Success = true,
        Announcements = smcNews

    }, JsonRequestBehavior.AllowGet);

  } catch (Exception ex) {
    return Json(new {
      Success = false, ErrorMessage = ex.Message
    }, JsonRequestBehavior.AllowGet);
  }
}