Custom Messsage Handler in SelfHost WebApi Application

To write a custom message handler, derive from System.Net.Http.DelegatingHandler and override the SendAsyncmethod. This method has the following signature:

Task<HttpResponseMessage> SendAsync(
    HttpRequestMessage request, CancellationToken cancellationToken);

The method takes an HttpRequestMessage as input and asynchronously returns an HttpResponseMessage. A typical implementation does the following:

  1. Process the request message.
  2. Call base.SendAsync to send the request to the inner handler.
  3. The inner handler returns a response message. (This step is asynchronous.)
  4. Process the response and return it to the caller.

Source Code

class Program
    {
        static void Main(string[] args)
        {
            var config = new HttpSelfHostConfiguration("http://localhost:5004");
            config.Routes.MapHttpRoute("API Default",
                "api/{controller}/{id}",
                new { id = RouteParameter.Optional }
                );
            config.MessageHandlers.Add(new CustomMessageHandler());
            using (HttpSelfHostServer server = new HttpSelfHostServer(config))
            {
                server.OpenAsync().Wait();
                Console.WriteLine("Please Enter to Quit");
                Console.ReadKey();

            }
        }
    }
 public class CustomMessageHandler : DelegatingHandler
    {
        protected async override Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
        {
            var response = await base.SendAsync(request, cancellationToken);
            Console.WriteLine("-------Request URL ----------- "); 
            Console.WriteLine(request.RequestUri);
            Console.WriteLine("-------Response------");
            Console.WriteLine(response);
            
            return response;
        }
    }
Advertisements

Lazy Load Images with jQuery

Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

Lazy Load Images with jQuery

Here is a basic sample code for lazy load.


<!DOCTYPE html>
<html lang="en">
<head>
	
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
		function elementInViewport(el) {
			var top = el.offsetTop;
			var left = el.offsetLeft;
			var width = el.offsetWidth;
			var height = el.offsetHeight;

			while(el.offsetParent) {
				el = el.offsetParent;
				top += el.offsetTop;
				left += el.offsetLeft;
			}

			return (
				top >= window.pageYOffset &&
				left >= window.pageXOffset &&
				(top + height) <= (window.pageYOffset + window.innerHeight) &&
				(left + width) <= (window.pageXOffset + window.innerWidth)
				);
		}
		 
		function loadimg(){

			$($("img.lazy")).each(function(ind,img){ 
				if (elementInViewport(img)){ 
					var image = new Image();
					image.src = $(img).data("src") ;	
					image.onload=function(){
						$(img).removeClass("lazy")
							.addClass("img")
							.attr("src",image.src);				
					};
				}
			});
		}
		$(document).ready(function(){
			$(document).on( "scroll", function(){
				loadimg();
			} );
		});
	</script>
	<style type="text/css">
		.img{
			 
			border: solid 1px #DDD; 
			width: 150px;
		}
		.lazy{
			display: block;
			float: left;
			border: solid 1px #DDD;
			height: 300px;
			width: 150px;
			background-image: url('spinner.gif');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 36px 36px;
		}
	</style>
</head>
<body>

	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
</body>
</html>