Code Monkey home page Code Monkey logo

st-img's Introduction

st-img

Built With Stencil

What is it?

st-img is a web component built with Stencil that allows you to lazy load images as the user scrolls them into the viewport. On supported browsers (Chrome and chrome based browsers, Firefox and Edge) it uses IntersectionObserver to accomplish this functionality. For Safari and IE it simply falls back to setTimeout.

Usage

To use this component in your app, no matter what framework you are using, follow these steps:

  • pop this script tag <script async defer src='https://unpkg.com/[email protected]/dist/stimg.js'></script> into your index.html

API

Properties:

Examples

 <st-img src="https://madeby.google.com/static/images/google_g_logo.svg" alt="google"></st-img>

st-img's People

Contributors

jgw96 avatar adamdbradley avatar danbucholtz avatar mlynch avatar bitflower avatar

Stargazers

avatar Parvez Shaikh avatar Koji Hisano avatar Anonimus Programus avatar Kuznetsov Ilia avatar Adrian Cruz avatar Jacky Shikerya avatar Luis Felipe Sousa avatar Dan Bowling avatar Shanmuga Priya avatar Pat Buchanan avatar Guilherme Prezzi avatar maciek_grzybek avatar Hakkı avatar Rob Axelsen avatar Sam McKay avatar Vincent Lu avatar Benjamin Lupton avatar David López Castellote avatar Darren O.Y. avatar lei1996 avatar North avatar Nils Torbjörn Petersen avatar Alex Carpenter avatar Abdel avatar Karl Herrick avatar James Brinkerhoff avatar Bernardo Anderson avatar Fabian Bentz avatar Paweł Lesiecki avatar Michael avatar Bruno Carvalho avatar Zhao Xiaohong avatar Jorge Sanz Pérez avatar Manu MA avatar BenHen avatar Adrian Carriger avatar Precious Jahlom Agboado avatar Henrique Custódia avatar Juan Urtazun avatar Sean Wu avatar Fredrik Lassen avatar Vitalii Bobrov avatar Alex Patterson avatar Jan Piotrowski avatar Rodrigo Fernández avatar Zoo Sky avatar Mehdi Achour avatar PatrickJS avatar Markus Staab avatar J.Pagano avatar Matthew Smith avatar Mehul Patel avatar Zafar Ansari avatar Kyle Cordes avatar Vishal Isharani avatar Fernando del olmo avatar

Watchers

James Cloos avatar Juan Urtazun avatar avatar avatar

Forkers

danbucholtz codercatdev juan-urtazun gringonivoli manucorporat jpchip bassettsj northmccormick sammckay10 jarrvis

st-img's Issues

Failed to load resource.

I am using copy.config.js to drop the st-img into build like following but getting an error.

    copyWebComponents: {
        src: [
            '{{ROOT}}/node_modules/st-img/dist/stimg**/*'
        ],
        dest: '{{BUILD}}'
    },

image

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.