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 started building my image browser with this demo which already enables uploading a directory and showing all the files including traversing through internal directories and files. You can click on an image and it is shown on the right using createObjectURL method and John Resig’s simple JavaScript templating code.

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.

I wanted to provide a slideshow capability and for that I am using the jQuery animate function to programmatically move the scroll bar to the next image with the JavaScript setInterval function. If you click on any image, the slideshow stops and the image is loaded into a modal window. There you can double-click to toggle a zoom that switches the image scale from browser screen height to 100% width. Next to the modal close button I added a zoom button that actually enables image zooming and dragging with your mouse.

Here is the HTML5 Photo Viewer and Directory Browser for images and galleries saved to your hard drive.