HTML5 Photo Browser for Local Files and Directories
Online Image Browser for Local Files
I was browsing old photo albums yesterday and it made me want to build an image viewer with HTML5. I want it to work with directories that have many files and this raises a question on browser performance. A gallery of pictures can easily consist of hundreds if not thousands of images. Loading all of them at once would probably crash the page or make it terribly slow and unresponsive. The DOM is not built to support so many elements with good speed. Plus, loading everything is wasteful as the screen size can only show a limited amount of images at one time.
The scroll bar can be used as a trigger to load new images from a huge set and remove other images that have been perviously loaded into the DOM. This is how websites like Tumblr and Pinterest work when you can keep scrolling and loading so many images on the page. The images above the fold get removed and Airbnb recently released a library called Infinity which does a great job on supporting large or infinite lists of elements in the browser. It kind of similar to lazy loading but more advanced in that the elements not in view are removed from the DOM and can be loaded back into the DOM when you scroll back up to their location.
I removed most of that and the styles to make things simple and I added a button to load all images after they are visualized with jqTree. Now, even if I am not inserting the image into the DOM, I don’t even want to load it and take up network resources until that image is needed. So, I plugged in Infinity and set up a loop to preload a few images with HTML5 FileReader. Then, in the lazy function of Infinity, I am loading more images as they are needed. This way, the page is super fast and only has a few requests initially but it can support scrolling through thousands of images.
Here is the HTML5 Photo Viewer and Directory Browser for images and galleries saved to your hard drive.