My first attempt to make script for Lazy-load images

Alex — Sat, 07 Jan 2023 09:08:42 +0000

This is very simple script, what make images to load only when they appear in your browser viewport. Why it's important you can read here here.

Script written on plain JavaScript, and it's weight <1 kb.

In html code it uses the same idea, as other similar scripts. Let's say you have image:

<img src='myCat.jpg'>

Change attribute src to data-src, so it will look like:

<img data-src='myCat.jpg'>

Script, when image appear in viewport will put value from data-src to newly created src attribute.

In first line of the script I put in array all the elements what I got by using getElementsByTagName():

var myImages = [...document.getElementsByTagName('img')];

This is because I don't know how to delete elements from the HTMLCollection, which I get using clearly document.getElementsByTagName('img'). So I put it into array, and can easily manipulate them.

I used:

document.addEventListener('scroll'

and function inside it, to check if image appear in viewport.

Inside of this function - simple for... cycle, which, using method getBoundingClientRect() will check, if image come in sight of viewport.

By using myImages.splice(i, 1) I remove already lazy-loaded image from array. When array empty - script stops:

if (myImages.length == 0) { document.removeEventListener('scroll', lazyLoad); }

I don't know how good or bad this script, but it works.
If someone find it useful I'll be happy 😊

Demo || Github

Script to Mark Text in article

Alex — Fri, 19 Mar 2021 18:40:16 +0000

Hi guys! My first post here, and this is my script what let user to mark text of the article that he find interesting or useful.

On text selection under cursor will appear block with 2 buttons - mark text and copy text.

If user clicked on 'mark text' - selected text will be surrounded with <mark> tag and highlighted. Also all text, what user marked will be collected into list in bottom right corner:

Nothing special with "copy text" button - it just copies text :)

Idea for this script comes to my mind when I worked on site for sea mans, where articles are big and very hard to read.

JSFIDDLE https://jsfiddle.net/Lestrae/po931gmq/12/

I know one bug in this script, but I hope you don't find it :D

DEV Community: Alex

My first attempt to make script for Lazy-load images

Script to Mark Text in article