Mini Scroller

image1_r
...
image2_r
...
image3_r
...
image4_r
...
image5_r
...
image6_r
...
image7_r
...
image8_r
...
image9_r
...
image10_r
...

It’s scrollPlaceholder-mini-light js!

Using 'scrollPlaceholder-mini-light.js' may speed up your web page’s loading time, and save your viewers bandwidth.

This web page is tabbable.

'scrollPlaceholder-mini-light.js' is intended for scrolled elements that contain 'img' (image) tags, such as the “Mini Scroller” div element positioned on the left side of your screen (or below, on smaller screens).

The larger, main images on this web page (below) are handled by a scrollPlaceholder-light.js javaScript file.

You can toggle the “page-positioning” of the Mini Scroller on this web page—between a default “fixed” setting, and an “absolute” setting—by clicking the “A/F” button located above the Mini Scroller. The “fixed” setting keeps the Mini Scroller from moving while you are scrolling the web page up and down; the “absolute” setting allows the web page to take the Mini Scroller along for the ride!

This allows you to experiment with all of the different scenerios for toggling between the red Mini Scroller images, and their grey, bandwidth-saving 'placeholder' image replacements.

For complete information about this web page, see this instruction page.

image1

Page components

Here are links to components that make up this web page, should you wish to set the web page up on your home computer:

  • - This page’s HTML code. ('Save' as 'scrollPlaceholder-mini-light.html.')
  • - The streamlined javaScript files linked-to from this web page: scrollPlaceholder-light.js; scrollPlaceholder-mini-light.js. ('Save' to a 'scripts' sub-folder within the same folder as the 'scrollPlaceholder-mini-light.html' file.)
  • - Intended Images (for the “Mini Scroller”): ('Save' to an 'images' sub-folder within the same folder as the 'scrollPlaceholder-mini-light.html' file.)
  • - Placeholder Images: ('Save' to an 'images' sub-folder within the same folder as the 'scrollPlaceholder-mini-light.html' file.)

The larger images on this web page can be downloaded from the instruction page. ('Save' those images to an 'images' sub-folder within the same folder as the 'scrollPlaceholder-mini-light.html' file.)

image2
...
image3
...
image4
...
image5
...
image6
...
image7
...
image8
...
image9
...
image10
...
Enjoy 'scrollPlaceholder-light.js' and 'scrollPlaceholder-mini-light.js'!