@PelagicCreatures/flyingfish

git / npm

The 'FlyingFish' controller watches for 'enterViwport' events then it launches a web worker to load the image on another thread and them sets the 'background-image' once loaded using an animation frame.

Curious to see the Sargasso FlyingFish class code? See it Here

As an IMG html element


                <img data-sargasso-class="FlyingFish" data-src="/demos/img.png">

As a responsive background image


                // background-image css style for responsive layout
.background-img {
	width: 100vw;
	height: 33vh;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

// html using a div w/ a centered background
<div class="background-img" data-sargasso-class="FlyingFish" data-src="/demos/img.png"></div>

Scoll down

Div w/background

IMG tag