神刀安全网

Lazy image loader designed to enforce progressive enhancement and valid HTML

lazy-progressive-enhancement.js

A lazy image loader designed to enforce progressive enhancement and valid HTML.

Most lazyload image libraries work by having the user specify an image’s source file in a data-attribute, and setting its src after a page is loaded. This is invalid HTML and disregards users who don’t have a javascript-enabled browser.

Benefits of lazy-progressive-enhancement.js

  • Designed to enforce progressive enhancement and valid HTML.
  • Written in pure JS — no dependencies.
  • Not a framework, not a library, just a function.
  • Also works on iframes.

Download, copy-paste, whatever 😉

Contents

Basic usage

By default, the function targets every noscript element on the page.

Any attributes the image has in noscript ( class / id / alt / etc) are kept.

HTML

<noscript><img class="hero-image" src="..."></noscript>

JS

loadMedia();

End result HTML

<img class="hero-image" src="...">

Load specific images

You can specify what images to load by passing in either

  1. A CSS selector string (use if calling the function before DOMContentLoaded )
  2. A NodeList of noscript s (from something like document.querySelectorAll )
  3. A singular noscript Element (from something like document.querySelector )

HTML

<noscript id="this-one"><img src="..."></noscript> <noscript id="not-this-one"><img src="..."></noscript>

JS

loadMedia('#this-one');

End result HTML

<img src="..."> <noscript id="not-this-one"><img src="..."></noscript>

onload function

You can hook an onload function for every loaded image

JS

loadMedia('#this-one', (function() {   this.classList.add('loaded'); ));

End result HTML

<img class="loaded" src="..."> <noscript id="not-this-one"><img src="..."></noscript>

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Lazy image loader designed to enforce progressive enhancement and valid HTML

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮