Git Product home page Git Product logo

niresh12495 / lazyhtml Goto Github PK

View Code? Open in Web Editor NEW
54.0 6.0 12.0 57 KB

LazyHTML is an OpenSource Javascript Library that Supports Lazy Loading of any elements without Modifying Code, LazyHTML can lazy load Ads, Videos, Images, Widgets, Javascript, CSS, Inline-Javascript, Inline-CSS & Any HTML.

License: GNU Affero General Public License v3.0

JavaScript 100.00%
lazyload intersection-observer lazyload-ads asynchornous asychronous-loading lazyload-widgets lazyload-elements lazyload-javascript lazyload-css lazy-load-adsense

lazyhtml's Introduction

LazyHTML: Lazy load Ads, Widgets, Images & Any HTML elements.

LazyHTML is an OpenSource Javascript Library that Supports Lazy Loading any elements without Modifying Code, LazyHTML can lazy load Ads, Videos, Images, Widgets, Javascript, CSS, Inline-Javascript, Inline-CSS & Any HTML. LazyHTML was initially developed with the intention to Lazy Load Ads

Features & Pros

  • Cross browser compatible.

  • Support Asynchronous loading.

  • LazyHTML can load Both Asynchronous & Synchronous Ads, Widgets, Javascript codes Asynchronously.

  • No HTML, Javascript or CSS Code modification required when Lazy Loading elements.

  • LazyHTML Supports lazy loading Ads without Modifying Adcodes.

  • Uses Intersection Observer with fall back to eager loading on its absence.

  • Supports eager loading.

  • Supports media queries.

  • Supports container dimension conditions.

    Cons

  • HTML, CSS or Javascript comments are not allowed inside the wrapper.

How it Works

Load the script.

 <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>

Wrap the elements those you want to Lazy Load.

<div class="lazyhtml" data-lazyhtml>
  <script type="text/lazyhtml">
  <!--
  
Your HTML, CSS or Adcodes here. (including wrapping <script>,<style> tags)
  
  -->
  </script>
</div>

Installation

Install via npm:

npm install --save lazyhtml

Support

lazyhtml's People

Contributors

niresh12495 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

lazyhtml's Issues

Why external div

I

<script type="text/lazyhtml"> </script>

I followed the steps but I have a query here. Why it is mandated to have div? Can't we directly add "data-lazyhtml" attribute in any element like footer or any

Load content after div

I saw that you are loading the content in the same div but is it possible to load the content after the div. Once the content is loaded then remove the div and internal script.

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.