npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

perezoso

v1.1.0

Published

Perezoso is a lightweight javascript plugin to lazy load images.

Downloads

4

Readme

perezoso.js (v1.1.0)

Perezoso is a lightweight javascript plugin to lazy load responsive images forked from fhopeman/justlazy.

Most of the existing javascript plugins using extensive dependencies or supporting just the img-tag without responsive parts. This plugin is supposed to be an alternative.

Features

  • 100% performance with plain javascript (no jQuery).
  • Simplicity and lightness (just lazy loading of images, no special cases).
  • Heavily tested on various devices, browsers and OS versions.

Installation

File include

You can download the latest release and include the perezoso.js file as follows in your page:

<script src="javascript/perezoso.js" type="text/javascript"></script>

NPM

$ npm install perezoso

Documentation

1. Define attributes

Anything passed to the placeholder as data-* will became an attribute with the same name in the newly generated img.

Example:

<span data-src="path-to-image/image.jpg"
      data-alt="some alt text"
      data-srcset="path-to-image/image-600.jpg 600w, path-to-image/image-1000.jpg 1000w"
      data-title="some title"
      data-class="img-class"
      class="lazyload-placeholder">
</span>

Will became <img src="path-to-image/image.jpg" class="img-class" alt="some alt text" srcset="path-to-image/image-600.jpg 600w, path-to-image/image-1000.jpg 1000w" title="some title">.

2. Register event

There are three possiblities to trigger the lazy loading of the image(s).

The most comfortable one registers an event listener for all placeholders with a specific css class (e.g. lazyload-placeholder). The images will be loaded automatically if they become visible. The parameters are the css-class as string and optional options.

Perezoso.registerLazyLoadByClass(css-class[, options]);

If you need more flexibility, the next function accepts as first parameter the html object of the placeholder. So you can decide how to extract the placeholder objects out of the html. The parameters are the placeholder as object and options if you need them.

Perezoso.registerLazyLoad(placeholder[, options]);

Parameters

css-class

The css-class is a string which has to be provided without the class selector dot as prefix.

Example:

Perezoso.registerLazyLoadByClass('load-if-visible');
placeholder

The placeholder has to be provided as plain javascript object.

Example:

Perezoso.registerLazyLoad(document.getElementById('placeholder-1'));
threshold

The threshold option is optional. The image is loaded the defined pixels before it appears on the screen.

Example:

Perezoso.registerLazyLoadByClass('load-if-visible', {
    threshold: 200
});
onLoadCallback

The onLoadCallback option is optional. When the new image is created and loaded, the function defined here is called.

Example:

Perezoso.registerLazyLoadByClass('load-if-visible', {
    onLoadCallback: function() {
        console.log('image loaded!');
    }
});