Loading

Lazy loading of search results

This post shows how you may implement lazy loading for search results (or any other viewer) web part.

Last time lazy loading became "must to have" feature in the world of web, especially when talking about mobile devices experience. We apply lazy loading for loading images or more data on demand.

Last days I've been working on the mobile site built with Kentico CMS and main purpose of that application was search through thousands of  record. Of course Kentico smart search capabilities were utilized to reach a goal. Smart search results web part was used to show the result on the page. Everyone who worked with that web part knows that it shows default pager control when there were more results found than page size. 

The issue I run into with that pager are:
The look of the control makes me feel like I'm back in time for 10 years - the nice thing here is that Kentico allows us to adjust the layout, styling, add or remove controls
Pager allows me to switch between pages, but what I need, in my particular case, is increasing page size until there are more available search results
My personal preference when working with Kentico CMS is to avoid customization as much as possible. So I've started to look for the solutions within Kentico features.

So, as you've might already guess, we are going to work with pager settings of the Smart search results web part. First thing I did in order to achieve my goal was:

  • setup pager page size to any reasonable value, let's say 25
  • setup paging mode to PostBack
  • check hide pager for single page
Next things we need to take care of are pager transformations. In this particular case we need just two transformations:
  • Pager layout
    • It should contain just one place holder for next page transformation. Why next? - Simply because Kentico will hide it when there is no more pager (more available search results). So my trasformation looks the following way:
<asp:PlaceHolder runat="server" ID="plcNextPage"></asp:PlaceHolder>

  • Next page
    • This transformation should increase smart search results page size instead of taking user to the next page. That's why the look of my transformation is:
<div id="loadMore"> </div>
<div style="margin: 10px;">
  <asp:Button class="btn btn-default btn-block" runat="server" text="loading more items..." ID="btnMore" ClientIDMode="Static" />
</div>
 
<script runat="server">
  protected override void OnLoad(EventArgs e)
    {
      base.OnPreRender(e);      
      Control parent = this;      
      while ( (!(parent is CMS.Controls.UniPager)) && 
             (parent != null))
      {
        parent = parent.Parent;
      }      
      if (parent != null && parent is CMS.Controls.UniPager)
      {        
        (parent as CMS.Controls.UniPager).PageSize = (parent as CMS.Controls.UniPager).PageSize + 25;        
      }
    }
</script>

This transformation contains a button that user might click when reached the bottom of the page, so it will trigger postback and fire OnLoad method implemented in the transformation, which increases the size of the page (amount of items to show). Another approach (the one I've chose) is to implement javascript that will click the button instead of user when reaching the bottom of the page. I'm not going to publish my javascript code as it has not any relation with Kentico as well as it is just the matter of developer preferences which one to use.

The final step is checking Use update panel setting of the Smart search results web part. After doing this your page should smoothly load more and more results.

This approach could be also used with other viewers, like repeater, but in this case I'd like to admit that described implementation is not a real lazy loading, but its mimicking, so it is strogly recommended to use AJAX + Kentico Rest service for data lazy loading in any other cases. You might ask me why have I used this approach. The answer is: because there is no way to get search results with Kentico Rest service. Also I'd not recommend using it with large amount of data.

Here you can find an example of repeater with "lazy loading". As I've already mentioned, it is not recommended to use this approach with repeater. I used it just for demo purpose. Try to scroll down to the bottom of the page and see how approach works.

Please leave your thoughts and comments, you have on this approach, as well as approach you're using to resolve similar problems.

Thank in advance,
Roman Hutnyk   


Comments
wty123
http://www.jordan-retro.org/, http://hornets.nba-jersey.com/, http://grizzlies.nba-jersey.com/, http://www.cheap-jerseys.mex.com/, http://kings.nba-jersey.com/, http://www.nike-shoescanada.ca/, http://www.giuseppezanotti.com.co/, http://www.rolexwatches-canada.ca/, http://www.air-huaracheshoes.co.uk/, http://www.michaelkors.mex.com/, http://coach.blackofriday.com/, http://www.new-balanceoutlet.org/, http://www.roshe-runs.co.uk/, http://www.michael-kors.net.co/, http://www.swarovski-crystals.com.co/, http://www.ralphlaurens-outlet.co.uk/, http://oakley.blackofriday.com/, http://www.vibram-fivefingers.in.net/, http://www.the-northface.com.de/, http://www.levisjeans.com.co/, http://www.omegas-relojes.es/, http://www.the-northface.ca/, http://www.hugo-boss.com.co/, http://www.ralph-laurenpolos.co.uk/, http://www.oakleys-sunglasses.com.co/, http://falcons.nfljersey.us.com/, http://cavaliers.nba-jersey.com/, http://www.nikerosherun.us/, http://www.michaelskors-outlet.co.uk/, http://www.ok-em.com/, http://www.rolex-watches.us.com/, http://timberwolves.nba-jersey.com/, http://www.cheap-jordans.net/, http://www.coach-factory.com.co/, http://www.uhren-stores.de/, http://www.nike-free-runs.de/, http://celine.blackofriday.com/, http://www.vans-shoesoutlet.com/, http://www.coachoutlet-inc.net/, http://www.ralphlaurens.ca/, http://www.christianlouboutin-shoes.ca/, http://www.fendi-outlet.in.net/, http://www.airmax-shoes.com/, http://www.michaelkors-ins.com/, http://www.pradahandbags.net.co/, http://www.givenchy.com.co/, http://www.nba-shoes.com/, http://www.raybans-outlet.com.co/, http://www.tommyhilfigerca.ca/, http://www.nike-skors.com.se/, http://www.tommyhilfigers.de/, http://www.rayban-sunglasses.co/, http://www.converseschuhe.com.de/, http://www.cheap-nike-shoes.net/, http://www.cheap-mlbjerseys.us.com/, http://coach-outlet.tumblr.com/, http://www.replica-handbags.com.co/, http://packers.nfljersey.us.com/, http://www.oakleys-frame.com.co/, http://www.oakley-outletonline.com.co/, http://www.nikeshoesoutlet.org.uk/, http://www.cheapjerseys.net.co/, http://www.iphone-cases.net/, http://www.soccers-shoes.net/, http://49ers.nfljersey.us.com/, http://www.polos-outletstore.net/, http://browns.nfljersey.us.com/, http://magic.nba-jersey.com/, http://www.raybans-outlet.net.co/, http://www.designer-handbagsoutlet.us.com/, http://www.scarpe-hogans.it/, http://www.raybans-outlet.nl/, http://steelers.nfljersey.us.com/, http://www.oakleys-outlet.com.co/, http://www.ralphlauren-polos.com.co/, http://www.swarovskissale.co.uk/, http://www.lacosteoutlet.com.co/, http://www.swarovski-canada.ca/, http://www.cheap-rayban.com.co/, http://www.nikestoreoutlet.us/, http://www.burberry-bags.com.co/, http://www.philipp-plein.us.com/, http://www.hogans.com.de/, http://www.oakleys-outlet.net.co/, http://www.michaelkors.so/, http://www.michael-kors-australia.com.au/, http://www.burberrys-outlet.in.net/, http://airmax.misblackfriday.com/, http://www.ed-hardy.us.com/, http://www.designer-handbags.vip/, http://www.pandoracharms-canada.ca/, http://raptors.nba-jersey.com/, http://www.truereligions.net/, http://www.coachfactory.shop/, http://eagles.nfljersey.us.com/, http://www.ralphs-laurenpolos.net/, http://www.raybans-outlet.org.uk/, http://www.nikefree5.net/, http://www.michaels-kors.us/, http://www.mcmbackpacks.net/, http://www.beatsheadphone.in.net/, http://www.marcjacobs-outlet.com/, http://www.the-northfaces.org.uk/, http://www.oakley--sunglasses.com.au/, http://www.oakley-sunglass.net.co/, http://www.barbour-jackets.us.com/, http://www.burberry-handbagssale.net.co/, http://www.nike-mercurial.com/, http://wizards.nba-jersey.com/, http://www.burberry-outletcanada.ca/, http://76ers.nba-jersey.com/, http://www.newoutletonlinemall.com/, http://www.coachoutlet-online.com.co/, http://www.true-religion.com.co/, http://www.michaelkorsoutlet.mex.com/, http://www.coach-factoryoutlet.net.co/, http://www.michael-korsoutlet.top/, http://www.mlb-jerseys.us.com/, http://www.christian-louboutinshoes.in.net/, http://www.tracksuits-store.com/, http://celtics.nba-jersey.com/, http://www.longchampbags.com.co/, http://www.rolexwatchesforsale.us.com/, http://www.ray-bans.net.co/, http://ravens.nfljersey.us.com/, http://rayban.blackofriday.com/, http://www.burberrybagsoutlet.co.uk/, http://www.nike-airmaxnc.co.uk/, http://www.jordanshoes.net.co/, http://www.oakleys-2017.in.net/, http://www.hollisteronlineshop.com.de/, http://www.montblanc-pens-sale.com/, http://www.dsquared2s.com/, http://www.hollisters.us.com/, http://www.fidgetspinner.us.com/, http://www.christian-louboutin.jp.net/, http://www.adidas-store.net/, http://michaelkors.euro-us.net/, http://heat.nba-jersey.com/, http://www.basketballshoes.com.co/, http://www.burberrybags.com.co/, http://titans.nfljersey.us.com/, http://www.cheap-baseballbats.us/, http://www.air-yeezys.com/, http://www.long-champbags.com/, http://www.converses-outlet.com/, http://www.nike-huarache.co.nl/, http://www.vansschuhe.com.de/, http://www.jimmy-choosshoes.com/, http://www.air-jordanshoes.us/, http://nuggets.nba-jersey.com/, http://www.ralph-laurens.org.uk/, http://suns.nba-jersey.com/, http://www.salomonshoes.com.de/, http://rams.nfljersey.us.com/, http://www.burberry-store.com/, http://www.michael-kors.cc/, http://www.reeboks.com.de/, http://www.iphonecases.net.co/, http://www.oakleysoutlet.com.co/, http://www.polos-ralphlauren.com.co/, http://www.chiflatirons.in.net/, http://www.barbour.in.net/, http://www.nike-rosherun.com.es/, http://www.burberryoutlet-sale.com.co/, http://www.under-armouroutlet.com/, http://www.raybans-glasses.com.co/, http://www.soccer-shoesoutlet.com/, http://www.ecco-shoes.us.com/, http://www.hollister.com.se/, http://pistons.nba-jersey.com/, http://www.raybanoutlet.ca/, http://www.burberryonlineshop.de/, http://www.michael-korsbags.com.co/, http://www.coachblackfriday.com/, http://www.mk-outletonline.us/, http://www.christianlouboutinshoesoutlet.org/, http://www.tommy-hilfigers.de/, http://www.ray-bansoutlet.com.co/, http://www.nfl-jersey.us.org/, http://www.ralphlauren-au.com/, http://lakers.nba-jersey.com/, http://www.montrespaschers.fr/, http://bucks.nba-jersey.com/, http://www.adidas-shoes.in.net/, http://www.coach-outletonline.ca/, http://www.toryburch-shoesoutlet.com/, http://www.the-northfaces.us.com/, http://www.soft-ballbats.com/, http://www.eyeglasses-outlet.com/, http://www.polo-ralphlaurens.us.com/, http://www.cheap-raybansoutlet.com.co/, http://www.burberry-outlets.org.uk/, http://www.rayban-sunglasses.fr/, http://longchamp.blackofriday.com/, http://www.the-northfaces.net.co/, http://www.zcoachoutlet.com/, http://www.nike-shoes.com.co/, http://www.true-religion-jeans.com.co/, http://www.ralphlaurenonlineshop.de/, http://www.oakley-sbocco.it/, http://coachoutlet.euro-us.net/, http://www.northfacejackets.fr/, http://www.lauren-ralphsoutlet.co.uk/, http://www.cheap-rolex-watches.org.uk/, http://www.oakley-sunglassessale.com.co/, http://www.michaelkorsoutlet.se/, http://www.cheapjerseys.us.org/, http://www.ray-bans.co.uk/, http://www.coach-outlets.net.co/, http://www.celine-bags.com/, http://www.bcbg-dresses.net/, http://www.oakley-sunglasses2017.com/, http://www.nike-airmax.com.de/, http://www.kate-spades.com.co/, http://www.barbours.us.com/, http://www.valentino-shoesoutlet.us.com/, http://www.katespadeoutlet.gb.net/, http://www.truereligion-outlet.us.org/, http://www.cheapshoes.net.co/, http://www.retro-jordans.net/, http://www.michaelkors-bags.us.org/, http://www.oakleysunglasses-canada.ca/, http://www.ferragamoshoes.in.net/, http://www.barbour-factory.net/, http://www.bottega-bags.com/, http://dolphins.nfljersey.us.com/, http://clippers.nba-jersey.com/, http://www.nike-skos.com/, http://www.ralphs-laurenpolo.co.uk/, http://www.new-balance-schuhe.de/, http://www.chiflatiron.net.co/, http://www.michael-kors-outlet.us.org/, http://www.instylers.us/, http://www.nikeair-max.es/, http://coach.euro-us.net/, http://www.kates-spade.com/, http://www.tnf-jackets.us/, http://www.michael-korsoutlet.cc/, http://www.nikeairmax2015.org/, http://www.mcmhandbags.com.co/, http://www.michaelkors-outletonline.cc/, http://www.omega-watches.com.co/, http://www.puma-shoes.de/, http://www.bcbg-maxazria.ca/, http://www.juicycouture.com.co/, http://www.juicycoutureoutlet.net.co/, http://nets.nba-jersey.com/, http://www.adidas-shoes.ca/, http://www.michael-korsoutlet.co.uk/, http://giants.nfljersey.us.com/, http://www.wedding-dresses.cc/, http://www.tommy-hilfiger.net.co/, http://www.nikefree-runs.org.uk/, http://colts.nfljersey.us.com/, http://www.hollisters-canada.ca/, http://www.hollister-clothing.com.co/, http://www.nike-air-force.de/, http://www.adidasshoes.com.se/, http://www.mbt-outlet.com/, http://www.new-balanceshoes.es/, http://www.longchamp-bags.us.com/, http://www.hermesoutlet.shop/, http://panthers.nfljersey.us.com/, http://www.michael-kors.com.es/, http://www.mizuno-running.net/, http://www.converse-shoes.net/, http://www.cheapoakleys.com.co/, http://www.thomas-sabos.com.de/, http://www.nikeshoes.org.es/, http://michaelkors.blackofriday.com/, http://mavericks.nba-jersey.com/, http://www.chrome-hearts.com.co/, http://www.beatsbydre.com.co/, http://www.prada-bagsoutlet.com/, http://www.swarovski-online-shop.de/, http://www.katespades.com.co/, http://spurs.nba-jersey.com/, http://www.north-face.com.co/, http://www.ralph-laurenpolosoutlet.com/, http://redskins.nfljersey.us.com/, http://ralphlauren.blackofriday.com/, http://www.nike-maxshoes.fr/, http://www.newbalance-shoes.org/, http://www.jerseys-store.com/, http://www.nikefree-run.net/, http://www.nike-shoesoutlet.com/, http://www.coachfactory.cc/, http://www.airmax.com.se/, http://www.michaelkorsoutletonline.net.co/, http://trailblazers.nba-jersey.com/, http://www.christian-louboutins.co.uk/, http://www.raybans-sunglasses.net.co/, http://cowboys.nfljersey.us.com/, http://www.adidas-shoes.nl/, http://www.nike-paschers.fr/, http://jaguars.nfljersey.us.com/, http://www.nikeair-max.ca/, http://www.hollister-store.com/, http://pacers.nba-jersey.com/, http://www.coachsoutletonline.in.net/, http://www.bottega-venetasoutlet.com/, http://www.burberry-outlets.net.co/, http://www.longchamps.com.co/, http://www.handbagsoutlet.in.net/, http://www.nike-outlet.us.org/, http://www.michaelkors-canadaoutlet.ca/, http://www.asicsoutlet.com.co/, http://www.marc-jacobs.us.com/, http://www.supra-shoes.org/, http://www.timberlandbootsoutlet.us.com/, http://www.truereligion-outlet.com.co/, http://www.ferragamos.us.com/, http://www.michaelkors.co.nl/, http://www.timberlandspaschere.fr/, http://www.pandora-jewelry.com.de/, http://www.nikeshoes.de/, http://www.nba-jersey.com/, http://www.cheapthomas-sabos.org.uk/, http://www.nike-store.in.net/, http://www.tommy-hilfigers.in.net/, http://www.nike-air-max.com.au/, http://bears.nfljersey.us.com/, http://www.michaelkors-store.us.org/, http://www.co-aol.com/, http://www.dsquared2-outlet.com/, http://www.new-balancecanada.ca/, http://www.adidas-schuheonline.de/, http://www.hermes-bags.com.co/, http://www.oakley-outlet.fr/, http://www.raybans-cher.fr/, http://www.true-religions.com/, http://www.armani-exchange.in.net/, http://www.nikeairmax-90.net/, http://knicks.nba-jersey.com/, http://www.nike-rosherun.co.nl/, http://texans.nfljersey.us.com/, http://www.mk-com.com/, http://www.michaelkors.com.de/, http://thunder.nba-jersey.com/, http://buccaneers.nfljersey.us.com/, http://www.adidas-shoes.es/, http://www.nike-roshe-run.de/, http://www.burberry-handbags.net.co/, http://www.puma-shoesoutlet.com/, http://lions.nfljersey.us.com/, http://www.ralph-laurenoutletonline.in.net/, http://www.tommys-hilfigers.com/, http://www.nike-store.com.de/, http://www.mcmbackpacks.com.co/, http://www.nike-airmax.us.com/, http://www.ferragamo.net.co/, http://www.raybans-outlet.cc/, http://www.coach-outlet.store/, http://patriots.nfljersey.us.com/, http://www.hoganshoes.org.uk/, http://www.burberrys-outletonline.com/, http://www.calvin-kleins.in.net/, http://www.nhl-jerseys.net/, http://www.cheap-pandoracharms.co.uk/, http://vikings.nfljersey.us.com/, http://www.barbour-jackets.com/, http://bengals.nfljersey.us.com/, http://www.horlogesrolexs.nl/, http://www.babyliss-pros.com/, http://www.giuseppes-zanotti.com/, http://www.soccershoes.us.com/, http://www.oakleys.com.de/, http://www.timberlandshoes.net.co/, http://www.prada-shoes.com.co/, http://www.converses.com.co/, http://www.michael-kors.in.net/, http://www.nike-schoenen.co.nl/, http://www.air-maxschoenen.co.nl/, http://broncos.nfljersey.us.com/, http://www.outlet-burberry.net/, http://www.rosheruns.us/, http://www.asicsoutlet.net/, http://www.mcms-bags.com/, http://www.pradas.com.de/, http://www.salvatore-ferragamos.com/, http://www.long-champ.com.de/, http://www.philipp-pleins.com/, http://pelicans.nba-jersey.com/, http://www.raybansbocco.it/, http://www.omegawatches.in.net/, http://www.hoodies-store.com/, http://bills.nfljersey.us.com/, http://www.airhuaraches.co.uk/, http://www.pandorajewellery.com.au/, http://www.oakleys-outlets.net/, http://www.longchampoutlet.com.co/, http://www.pulseraspandora.com.es/, http://www.adidassuper-star.de/, http://www.swarovski-australia.com.au/, http://www.christian-louboutins.in.net/, http://warriors.nba-jersey.com/, http://www.christianlouboutinoutlet.net.co/, http://www.cheap-watches.in.net/, http://www.woolrich-clearance.com/, http://www.beatsbydrdrephone.com/, http://www.women-clothes.com/, http://www.polo-ralph-lauren.de/, http://www.prada-outlet.com.co/, http://www.pandorajewelry.top/, http://www.nike-airmaxs.fr/, http://bulls.nba-jersey.com/, http://www.vans-shoes.co.uk/, http://saints.nfljersey.us.com/, http://www.raybans.org.es/, http://www.jimmy-chooshoes.com/, http://www.louboutin.jp.net/, http://www.timberland-boots.com.co/, http://www.polos-outlets.com/, http://www.ralphslaurenoutlet.us.com/, http://www.cheapnhljerseys.us.com/, http://www.hermes-birkinoutlet.net/, http://www.hollisterclothings-store.com/, http://www.nikeairmax.com.de/, http://www.the-northfacejackets.net.co/, http://azcardinals.nfljersey.us.com/, http://hawks.nba-jersey.com/, http://www.nikefactory.com.co/, http://www.oakleys.mex.com/, http://www.oakleys.org.es/, http://www.rolex-watchoutlet.com/, http://jets.nfljersey.us.com/, http://jazz.nba-jersey.com/, http://www.ralph-laurenoutletonline.com/, http://www.mcm-handbags.org/, http://www.swarovski-jewelrys.com/, http://chargers.nfljersey.us.com/, http://www.nfljersey.us.com/, http://www.supra-footwear.net/, http://www.long-champoutlet.com/, http://chiefs.nfljersey.us.com/, http://raiders.nfljersey.us.com/, http://www.poloralphlaurenoutlet.net.co/, http://www.versace-outlet.com/, http://www.jordan.com.de/, http://rockets.nba-jersey.com/, http://seahawks.nfljersey.us.com/, http://www.thenorth-face.com.co/, http://www.tommyhilfigers.nl/, http://www.nikeshoes-outlet.com/, http://www.nikefreeshoes-inc.co.uk/, http://www.cheap-michaelkors.com.co/, http://www.beats-by-dre.com.co/, http://www.raybans.com.de/
6/24/2017 7:20:20 AM

<a href="http://olimpiec.nevinsk.ru/?p=1328">ShowBox</a>
let me take you to the adventurous tour to find the treasure of Apps like Show Box to Stream Videos and Tv shows on Android and iOS. Looking for a WORKING apk and a procedure to perform Showbox apk download on your Android.
6/22/2017 6:11:44 AM

Apps like ShowBox
let me take you to the adventurous tour to find the treasure of Apps like Show Box to Stream Videos and Tv shows on Android and iOS. Looking for a WORKING apk and a procedure to perform Showbox apk download on your Android.
6/22/2017 6:10:47 AM

Affordable assignment help
Leave an order: and we will contact you as soon as possible. Our team consists of professional and experienced writers only.
6/12/2017 10:45:54 AM

Case Study Solution Help
Our home comprises of vital scholars and inventive practitioners who grasp a hands-on way to deal with coordinated imaginative administrations inside a full-scale generation and studio office. More than 60 years of image making has situated us as the head goal for all types of substance creation for the home business.
6/9/2017 7:34:38 AM

pmp certification
Gain an in-depth knowledge of the process groups and master project management methodologies.
5/29/2017 10:03:42 AM

WhatsApp Video Call Not Working
WhatsApp Video Call is now available for Android smartphones with the release of 20.16.80 beta version.Future updates of whatsapp (2.12.16.2) may contain whatsapp video call option.Download Whatsapp video calling feature on activation.
5/11/2017 4:38:17 AM

replica watches uk
great
5/10/2017 9:29:47 AM

rushanessay.com
Sometimes lazy loading of search results happen and that is the quite frustrating situation. The number of websites pages are big because they involve the more graphics and layout, styling which makes them slow to load. The website page must have the relevant information and don’t involves the extra or useless creative work which might damage website popularity.
5/3/2017 3:54:45 AM

computer equipment recycling
A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post.
4/10/2017 1:23:55 PM

cheap seo company
This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.
4/3/2017 1:12:54 PM

Mariia Zhokh
Really usefull post. Thanks for sharing that.
7/2/2015 9:59:22 AM

 Security code