Lazy loading with Waypoints

Hello,

In this post I’m going to explain how to load page content as client need it. In other words, how to load content when scroll to it vertically. We call it Lazy loading.

First thing you have to do is including Waypoints files in your project.

You can load required Waypoint.min.js from the Cloudflare CDN as well.

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" type="text/javascript">

Next step is defining a Waypoint object.

 var waypoint = new Waypoint({
        element: document.getElementById('images'),
        handler: function () {
            //perform your loading action here.
        }
    });

You can also use offset property to manipulate scroll offsets.

 var waypoint = new Waypoint({
        element: document.getElementById('sectActual'),
        handler: function () {
           //perform your loading action here.
        },
        offset: 450
    });

You can also have a look into ASP.NET MVC – Loading Content Asynchronously post. I have demonstrated how to load images asynchronously in an ASP.NET MVC application.

Fazlasını Oku