image Infinite Scrolling with api Javascript

 

Infinite scrolling is the popular JS tech for better customers experience,especially with images loading while scrolling,no need to refresh page to fetch new ones. 

The images from unsplash api link here

CODE SEPERATE BELOW:

HTML HEAD

I only set the tab label icon here.

HTML BODY

Loader is the svg from loading.io

Image-container is for all the images fetching from api.

yeah ,don't forget to link js file .

CSS

Import fonts from Google fonts as needed.

The background is the pattern shape.

The title does stroke stylish.

The loader is the svg, positioning in the center of screen.

For responsive small screen, it's neccessary to change the styles .

JAVASCRIPT

Get the DOM with getElementById.

Initial setup for variable.

Go to unsplash api. And create the api , then you will get the apiKey.  copy it in the code.

Then it's able to fetch the data in the console.log().

When first load the page,it will fetch the 5 images,when scrolling to the bottom of page,the count should be updated to 10,which means loading more images after first for fast performance.

Here I tried add the collection attributes,which need initial the collection id. 

After images loaded,the loader disapears and update new count.

setAttributes() for easier html display.

Everytime call the function,reset the imageLoaded to 0.

Loop every photo from photosArray,and create the a tag and the image link. When finish loading,go to imageLoaded().

Fetch data from Unsplash api.

When scrolling,calculate the length of site. and ready=true,means the imageLoaded() done. Then run the getPhoto() again.

code in Github