image1

How does the 'scrollPlaceholder.js' file work?

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.'

Once a link is added to a web page that points to the external javaScript/jQuery 'scrollPlaceholder.js' file, a Console panel will automatically be positioned on the web page by the 'scrollPlaceholder.js' file.

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.

image2

Steps for utilizing 'scrollPlaceholder.js'

Step 1) Add the following link to the bottom of your web page:

<script type="text/javascript" src="scrollPlaceholder.js" async></script>

The external javascript/jquery 'scrollPlaceholder.js' file should be placed within the same folder as the web page file itself (unless you adjust the link’s 'src attribute' value accordingly should you place the .js file elsewhere).

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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="scrollPlaceholder.js" async></script>

image3

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">

image4

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:

var imScrClassImages = [];
imScrClassImages.push("images/image1.png");
imScrClassImages.push("images/image2.png");
...
var placeholderImages = [];
placeholderImages.push("images/blank1.gif");
placeholderImages.push("images/blank2.gif");
...

[All 'placeholder images' used on this web page (blank1.gif ― blank10.gif) are less than 2kb in size.]

image5

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.

image6

Page components

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:

image7
Here is an example page where all ten 'img' tags in the page’s html-code have their 'src attribute' values set to smaller-file-size 'placeholder images'; none of the 'img' tags in the html-code have an 'id attribute' value set (the linked-to 'scrollPlaceholder-example1.js' script will automatically assign each such 'img' tag a temporary 'id' value); none of the 'img' tags have the class='imScr' class attribute set (the 'scrollPlaceholder-example1.js' file has its 'addClassImScr' variable set to [true], therefore all 'img' tags on the web page will automatically be assigned a temporary class='imScr' class attribute); all of the 'intended images' for the web page are of a different size (with each of their counterpart 'placeholder images' mirroring that size); and all of the 'placeholder images' have 'Blink Ads' added to them. 'Blink Ads' are sumbliminal-in-nature ads that the viewer sees for only a split-second during the transition from a 'placeholder image' to an 'intended image.'
image8
Here is a web page that utilizes scrollPlaceholder-light.js, which is a stripped down version of the 'scrollPlaceholder.js' file. The 'scrollPlaceholder-light.js' file lacks a Console and a few variable options.
image9
The 'scrollPlaceholder.js' script is based largely on this stackoverflow.com article featuring this jsfiddle.net example by ally.
image10
Enjoy scrollPlaceholder.js!

Home PageTo Top of Page