Promise – finally

The finally method of a Promise  allows you to execute code after a promise has been settled. If the promise succeeds or fails the finally method is called. This is useful if you want to run some code regardless of the outcome of the promise. The promise finally method is similar to the finally method in a try catch finally block.

Continue reading Promise – finally

Infinite scrolling using Intersection Observer

In a previous blog post, we introduced the Intersection Observer API , which is used to asynchronously tell us when an element intersects with another.

 In this post, we will show just how easy it is to add infinite scrolling to dynamically load more content to when the user scrolls to the bottom of the page. The code for this demo is available here

HTML

For the HTML, we need a container to add elements to and we need an element to tell us when the user has reached the bottom of the page.

div id="infinite-container">
</div>

<div id="infinite-indicator">
  <h2 class="text-center">Loading More ...</h2>
</div>

In the above code, we have a div with id “infinite-container” which will hold all the content and an div with id “infinite-indicator”  which when visible means that the user has scrolled to the bottom of the page.

Javascript

First, we create an instance of the intersection observer

// create an intersection observer, it calls the loadMore function when the intersection of the element changes
const observer = new IntersectionObserver(loadMore);

Next we create references to the div elements

// element to detect end of page
var indicator = document.querySelector('#infinite-indicator');

// element which contains the images
var container = document.getElementById('infinite-container');

Next we start observing

observer.observe(indicator);

We also have an array of images which will be loaded by the loadMore function

// array of images
var img_arr = [
'images/ishan-seefromthesky-1113275-unsplash.jpg',
'images/eberhard-grossgasteiger-1254739-unsplash.jpg',
'images/paula-russell-1253027-unsplash.jpg',
'images/artem-sapegin-1252570-unsplash.jpg',
'images/sylas-boesten-1253896-unsplash.jpg',
'images/will-turner-1254397-unsplash.jpg'
]

Next we have to implement the loadMore function which is called when the infinite-indicator div is visible.

function loadMore(arr) {
  // if the element is intersectingif(arr[0].isIntersecting){
  // get a random index from the array
  var random = Math.floor(Math.random()*6);

  // create an image and append it to the container and set the source of the image
  var img = document.createElement('img');
  container.append(img);
  img.src = img_arr[random];
  }
}

In the above code, we first check if the element isIntersecting, which means that its visible, if it is ,we then get a random index, create a new image and add it to the container.

Async Await

Previously we had a small introduction on Promises which are used in asynchronous events and getting data after an event occurs, Async Await is a JavaScript API that allows you to write asynchronous code in a synchronous manner so that your code is easier to read and debug.  

Async Await is just different syntax for using Promises, they use promises in the background. Most browsers support Async Await, you can get the full list here.

Continue reading Async Await

Page Visibility API

The Page Visibility API tells you if the current page is visible or not and also informs you when the page becomes hidden or visible. 

This API is supported in almost all browsers, you can find the full list here.

Uses

Before we go into the details of the API, it is helpful to know why its useful to us.

When a page is in the background, you can do the following things

  • pause videos and animations so since the user is not looking at it anyway
  • Slow down or stop updates from your server thereby saving user bandwidth and lessening load on your servers.
  • Notify the user of events via notifications so that they can get back to your website.
  • Monitor how long users actually spend on your website and pages.

API Methods

document.hidden

document.hidden returns true if the entire page is currently hidden.

document.visibilityState

It has four possible values which specify finer level of detail about the visibility of the page.

a) Visible – Document is completely visible

b) hidden – Document is completely visible

c) Document is loaded but is offscreen

d) unloaded – the document is not loaded

visibilitychange

This is an event that you can listen to which gets triggered when the visibility of the page changes

Example:

document.addEventListener("visibilitychange", function(){
if(document.hidden == true){
console.log('the page is now completely hidden');
}else{
console.log('the page is now visible');
}
});