Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

😴 gandul! accessible lazy loading images

License

NotificationsYou must be signed in to change notification settings

alterebro/accessible-image-lazy-load

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

88 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gandul

gandul! 😴 (accessible-image-lazy-load)

MIT licenseNPM VersionFile SizeTwitter


Accessible lazy loading images

gandul 😴 is a lightweight (<2Kb) non-dependant javascript module that adds a different approach on lazy loading focusing on accessibility. Most existing options work by either making you drop thesrc attribute of the image or, making you create a base64 data / low resolution blurred alternative version of the image, or also including the img element into a<noscript> tag. This could be hacky and verbose and the main issue with it is that alters the semantics of the original element.

In order to avoid that,gandul 😴 works by taking a common anchor hyperlink<a> as the data source of the image to be loaded and transforms it into a<img> element. This way you don't lose the reference to the image you want to show and, in case there's no JavaScript, your image will still be accessible by users and crawlers.

Basic Example :

<!-- How your HTML will look like: --><ahref="http://picsum.photos/320/180"class="gandul">Nice kitten</a><!-- What the gandul script will output : --><imgsrc="http://picsum.photos/320/180"class="gandul"alt="Nice kitten"/>
HTML Inputgandul 😴 Output
<a href="http://picsum.photos/320/180">Nice kitten</a><img src="http://picsum.photos/320/180" alt="Nice kitten" />
Nice kittenNice kitten

How to use it

1. Download the script

You have multiple options to get gandul 😴 (gandul.min.js ):

2. Get it working

Write an anchor hyperlink with the reference to your image and set the class gandul on it (<a>). then, include and call the script :

<!-- How a gandul image reference looks like --><ahref="http://picsum.photos/200/200"class="gandul">Nice kitten</a><!-- Include and call the script --><scriptsrc="https://unpkg.com/accessible-image-lazy-load"></script><script>gandul();</script>

Image Attributes

gandul 😴 will take all the existing attributes on the<a> element and they will be passed to the newly created<img> with a few peculiarities, as<a> elements don't havesrcset,sizes,width... attributes, those will be passed as data attributes. Right below you can see the equivalences table and some examples:

In case you want to applygandul to a different HTML element than a hyperlink (<a>) the image source will be taken from thedata-href attribute

<a> attributes<img> attributes equivalence
Anchor hyperlink inner text.alt
hrefsrc
data-hrefsrc
data-srcsetsrcset
data-sizessizes
data-widthwidth

Fully responsive image example:

<!-- Write your hyperlink HTML as it follows : --><ahref="http://picsum.photos/800/400"data-srcset="http://picsum.photos/320/160 320w,             http://picsum.photos/480/240 480w,             http://picsum.photos/800/400 800w"data-sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"class="gandul">Nice kitten</a><!-- To get a responsive image output like this one: --><imgsrc="http://picsum.photos/800/400"srcset="http://picsum.photos/320/160 320w,             http://picsum.photos/480/240 480w,             http://picsum.photos/800/400 800w"sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"class="gandul"alt="Nice kitten"/>

Setting just the width attribute of an image :

<!-- What you'll write: --><ahref="http://picsum.photos/800/400"data-width="800"class="gandul">Nice kitten</a><!-- What you'll get : --><imgsrc="http://picsum.photos/800/400"width="800"alt="Nice kitten"/>

Any other attributes :

Any other attributes will remain as they are, which means that if you already set or you need on the<img> anid or differentclasses, those will be passed through thegandul 😴 script :

<!-- input --><ahref="http://picsum.photos/800/400"id="cat"class="nice kitten gandul">Nice kitten</a><!-- gandul output --><imgsrc="http://picsum.photos/800/400"id="cat"class="nice kitten gandul"alt="Nice kitten"/>

Options

Some parameters can be send to thegandul 😴 function:

gandul(target,opts,action);
  • target (@string) : a selector targeting all the elements where you want the script to get executed. It defaults to all anchor hyperlinks with the classnamegandul :"a.gandul"
  • opts (@object) : an options object containing the fields used by theIntersectionObserver constructor
    • root : element used as viewport of the target. Default value is the brwoser viewport (null)
    • rootMargin : margin of root element to grow or shrink the intersection. Default value takes an extra 50 pixels above and below the viewport ("50px 0px 50px 0px").
    • threshold : percentage of target visibility to trigger the action. Default is0.
  • action (@function) : A callback function to be executed when the image finishes loading after the target has intersected the given viewport, it comes with image element itself as first parameter (function(img){ /* console.log(img) */ }). The default action when image loads is to attach to theimg element the class named'gandul-active'.

The following example makes use of some of these options, it will target all hyperlinks with the classgandul-hyperlink, will be activated when 50% of the target element is visible and the function used as callback will change the created image border style as defined below:

gandul('a.gandul-hyperlink',{threshold:.5},function(img){img.style.border='solid red 10px';});

Development

# Clone the repo$ git clone https://github.com/alterebro/accessible-image-lazy-load.git$cd accessible-image-lazy-load/# Install dependencies$ npm install# Build (any of the below will do it)$ npm run build$ gulp

Gandul. Accessible Image Lazy loading
Jorge Moreno —@alterebro


[8]ページ先頭

©2009-2025 Movatter.jp