DeferredLoad control

Control used to start loading content before the control is visible in the viewport. Usually on page load, scroll or page resize.

Deferred content

Content loaded when visisble, immediately on page load in this case.

DeferredLoad/Index.cshtml

@(Html.Awe().DeferredLoad(new DeferredLoadOpt
{
    Name = "defLoader0",
    Url = Url.Action("Content1")
}))

Demos/Helpers/DeferredLoadController.cs

public IActionResult Content1()
{
    return Content("<p>content loaded using deferred</p>");
}

Infinite content loading

Once the current content has finished loading, the next content will be loaded when the deferred loader becomes visible again.
The component will continue loading content indefinitely until the returned data is an empty string, signaling no more content is available.

DeferredLoad/Index.cshtml

@(Html.Awe().DeferredLoad(new DeferredLoadOpt
{
    Name = "defLoaderInf",
    Url = Url.Action("ContentInf"),
    InfLoad = true
}))

Demos/Helpers/DeferredLoadController.cs

public IActionResult ContentInf(int index)
{
    if (index > 5)
    {
        return Content(string.Empty);
    }

    return Content("<p>content loaded for index: " + index + "</p>");
}

Loading content on scroll

Loading content generated in js. Content could be also returned from the server, we could render and return a partial view.
When we return an empty string or null, the control will stop trying to load content.
wrap function can be used to process the result before adding it to the page.
onAdd function is used to execute code after a result was added to the page.

DeferredLoad/Index.cshtml

<div id="loaderInfo"></div>
@(Html.Awe().DeferredLoad(new DeferredLoadOpt { 
    Name = "defLoader1",
    InitFunc = "initDefLoader1"
}))
<script>
    function initDefLoader1(opt){     
        opt.infLoad = true;
        opt.getData = (prm) => prm.index > 5 ? '' : new Promise((resolve) => {setTimeout(() => { resolve(prm.index); }, Math.random() * 500)});
        opt.wrap = ({res}) => $('<div class="big" />').height(300).html(res);
        opt.onAdd = ({res}) => $('#loaderInfo').html('last content: ' + res);            
    }
</script>

Comments