Long description

The browser that contains a header at the top and two rows of images in three columns is placed at the top of the figure. The images correspond to the first block of code that reads as follows: open angle bracket i m g s r c equals open double quotes ellipsis close double quotes alt equals open double quotes ellipsis close double quotes close angle bracket. A grid that consists of the structure of 6 images placed in two rows is shown below the browser. Note 1: Images that are not visible will not yet be downloaded. This will improve perceived responsiveness of the visible portion of the page. The first row of images in the grid corresponds to the second block of code that reads as follows: open angle bracket data hyphen s r c equals open double quotes ellipsis close double quotes data hyphen alt open double quotes ellipsis close double quotes class equals open double quotes lazy close double quotes close angle bracket. Since no s r c attribute is provided, these images are not downloaded by the browser when H T M L is received. The second row of images in the grid corresponds to the third block of code that reads as follows: i m g dot lazy open curly brace at indentation level 0. Line 2: width colon 320 p x colon at indentation level 1. Line 7: height colon 240 p x semicolon at indentation level 1. Line 4: close curly brace at indentation level 0. C S S for images are sized correctly so that no content shifting occurs when real images are received.

Note 2: Event listeners will be needed for scroll, resize, and orientationChanged events. The fourth block of code is placed below the grid and reads as follows. Line 1: document dot addEventListener open parenthesis open double quotes scroll close double quotes comma lazyload close parenthesis semicolon. Line 2: window dot addEventListener open parenthesis open double quotes resize close double quotes comma lazyload close parenthesis semicolon. Line 3: window dot addEventListener open parenthesis open double quotes orientationChange close double quotes comma lazyload close parenthesis semicolon.

Note 3: For each image, check if now visible. If it is, then change its s r c attribute to the correct one in data hyphen s r c. This will make the browser request that file. The fifth block of code is placed below the fourth block of code and reads as follows. Line 1: function lazyLoad open parenthesis close parenthesis open curly brace at indentation level 0. Line 2: const images equals document dot querySelectorAll open parenthesis open double quotes i m g dot lazy close double quotes close parenthesis semicolon at indentation level 1. Line 3: for open parenthesis StartCommand let EndCommand i m g of images close parenthesis open curly brace at indentation level 1. Line 4: if open parenthesis i m g dot offsetTop open angle bracket open parenthesis window dot innerHeight plus window dot page Y Offset close parenthesis close parenthesis at indentation level 1. Line 5: i m g dot s r c equals i m g dot dataset dot s r c semicolon at indentation level 2. Line 6: i m g. alt equals i m g dot dataset dot alt semicolon at indentation level 2. Line 7: i m g dot classList dot remove open parenthesis open single quote lazy close single quote close parenthesis semicolon at indentation level 2. Line 8: close curly brace at indentation level 1. Line 9: close curly brace at indentation level 0.