Using 'scrollPlaceholder.js' may speed up your web page’s loading time, and save your viewers bandwidth.
['scrollPlaceholder.js' is intended for web pages that contains 'img' (image) tags.]
The 'scrollPlaceholder.js' file works by replacing full-file-size images intended for viewing on a web page with smaller-file-size 'placeholder images.' This replacing of images occurs whenever the images intended for viewing on a web page move above or below the viewing screen, as you scroll down, or scroll back up, the web page. This replacing of full-file-size images with smaller-file-size 'placeholder images' increases the speed with which a web page loads into a browser, and saves page viewers precious 'bandwidth.'
On the Console panel can be observed the following: For any image located within a device’s viewing screen (such an image will be referred to as an 'intended image' for this explanation) there will be information about that image highlighted in dark red on the Console. When you scroll down or scroll up your web page, that 'intended image' will be replaced by a smaller-file-size 'placeholder image' (with its information highlighted in dark blue on the Console) whenever the 'intended image' moves above or below the device’s viewing screen.
Step 1) Add the following link to the bottom of your web page:
Note: It is assummed that there is an external link on your web page to the 'jQuery library,' and that that jQuery link is positioned somewhere above the external 'scrollPlaceholder.js' link.
Example external links:
Step 2) Add a class="imScr" class attribute to any or all 'img' tags on your web page. All such 'img' tags will require an 'id attribute' value in order for the 'scrollPlaceholder.js' file to work. Conveniently, any 'img' tag that does not have a set 'id attribute' value will be automatically assigned a 'temporary' id value by the 'scrollPlaceholder.js' script.
Example of an 'img' tag with an 'id' value and 'class' value that have been added manually:
<img id="firstImage" class="imScr" src="images/image1.png" alt="firstImage" title="First image">
[For initial page-testing, you may choose to leave the 'img' tag 'src attribute' values 'as is,' and set the 'scrollPlaceholder.js' variable 'pageImgOrArrayImg' to [true]—which will signal the script to auto-fill the 'imScrClassImages' array. See the 'Variable Options Section' at the top of the scrollPlaceholder.js file for details.]
For best web page performance when your web page goes 'live,' add smaller-file-size images as 'placeholder images' in lieu of the web page's 'intended images' in all script-associated 'img' tags:
<img id="firstImage" class="imScr" src="images/blank1.gif" alt="firstImage" title="First image">
Step 3) Add 'placeholder images' to the 'placeholderImages' array at the top of the 'scrollPlaceholder.js' file, and add 'intended images' for the web page to the 'imScrClassImages' array, also at the top of the 'scrollPlaceholder.js' file (as shown below). Make sure that your smaller-file-size 'placeholder images' are of the same width and height as their 'intended image' counterparts, to avoid 'text-jumping' on the web page, that can occur when viewers scroll down or up a web page, and images used as 'placeholder images' are not the same dimensions as the 'intended images' that replace them.
Example image entries into the 'imScrClassImages' and 'placeholderImages' static arrays:
[All 'placeholder images' used on this web page (blank1.gif ― blank10.gif) are less than 2kb in size.]
Step 4) The variable 'showConsole' at the top of the 'scrollPlaceholder.js' file is set to a value of [true] by default. This default setting will result in the display of the Console panel on the web page when the web page has loaded, and can be used for testing purposes.
When you are satified with your web page image-configuration, and you are going to go 'live' with your web page on a website, you can change the 'showConsole' variable’s value to [false]—and the Console panel will not display on the web page.
[The Console’s display information can help you quickly identify the 'id,' 'file name,' and 'file dimensions' of any image on your web page that has the 'class="imScr"' class attribute added to that image’s hosting 'img' tag.]
Note: The 'scrollPlaceholder.js' file will also react to a web page whenever the web page is being 'resized' horizontally, as you will see documented on the Console.
Here are links to all of the components that make up this web page, should you wish to set the web page up on your home computer: