Hello Reader's if you find your website is too heavy to load the contents, then you can use the ajax to load images.
By using Ajax data be loaded and browser will load the heavy images with fade in effect.
So lets get started with loading contents via ajax.

Step 1. Create a simple html page and choose the part where you want to show content via ajax.
In this case we are using a slider and putting the dynamic images and data inside it. It's html code will go like this:-

 <section class="productGallery flexslider">
    <header class="borderBTMSolid clearfix">
      <h3 class="pull-left">Loading ajax data</h3>
    </header>
    <ul class="slides" id= "show_coolListingsByajax" >
    </ul>
  </section>

In the code above you need to remove all the <li> data and assign the unique id for <ul> tag which is "show_coolListingsByajax".
 

Step 2. To send an Ajax request we need to run the javascript in the bottom of the page. And its code will go like this:- 

<script type="text/javascript">
  
  // this is ajax part for loading the cool listing via ajax
$( document ).ready(function() {
      $.ajax({
      type: "POST",
      url: webUrl+'userSite/coolListings',
      data: ({listing:'getCoolListings'}),
      success: function(data) {
      //console.log(data);
       $('#show_coolListingsByajax').html(data);    
       $('.flexslider').flexslider({
        animation: "slide",
        controlNav: false,
        slideshow: false,
        animationLoop: false,
        itemWidth: 220,
        itemMargin: 17
      });
      }
    });
});

</script>

In the code above we are sending a post request to coolListings function of userSite controller and the data which we will get printed over there we will show it inside the <ul>.

Step3. Now create a function inside the controller and hit mysql query for results. Once you get the results assign them inside a var and compose its html code and the code will go like this:-

  public function coolListings()
          {
           $coolListings = $this->usersitemodel->coolListings();

$htmlResults = "";
           foreach ($coolListings as $result) { //no making the html for the home page 

$price = '<span class="price pull-left">SAR <span>'.$result["auction_buy_now"].'Buy Now'</span></span>';

  $htmlResults =  $htmlResults. '<li style="width: 100px; margin-right: 15px; float: left; display: block;"><a href="'.base_url().'browse/getSingleListDetails/'.$result["id"].'"><figure>
          <img src="'.base_url().'assets/images/listing_images/'.$result["img"].'" class="img-responsive">
        </figure>
        <div class="info">
          <span class="plusIcon"></span>
          <div class="infoContainer">
            <span class="titleInfo">'.$result["name"].'</span>
            <p class="title">'.$result["listing_title"].'</p>
            <p>
             '.$price.'
              <span class="buyNow pull-right">View Now</span>
            </p>
          </div>
        </div>
      </a>
    </li>';
 }       
         print_r($htmlResults);
          
          }
		  

In the code above you can see the var $htmlResults is containing the html of <li> for <ul> tags and we have print this variable in the last line of the code. The output of this code will be html generated for <ul> slider and will return back to our main page's ajax script success. This success code will executed by the code which we have already coded in step 2

//console.log(data);
$('#show_coolListingsByajax').html(data);  

This code will load that html to ul and the slider will get images with data by ajax which will save the loading time of webpage.