From fc144e0479cb18ec9d8fdfa4f3d1d94dca38defa Mon Sep 17 00:00:00 2001 From: Marc Amos Date: Thu, 8 Oct 2020 15:35:53 -0400 Subject: [PATCH] Polish on the docs --- README.md | 11 ++++++----- demo/index.html | 41 ++++++++++++++++++++++++++--------------- demo/styles.css | 10 +++++++++- package.json | 2 +- 4 files changed, 42 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 2180852..5b4a30d 100644 --- a/README.md +++ b/README.md @@ -8,17 +8,18 @@ https://theoutfit-lazyload.netlify.app/ ## How to Implement 1. Install it: npm i @theoutfit/lazyload --save -2. Call it: lazyload() -3. Adjust your code: - * change every src attribute to data-lazy-src - * change every srcset attribute to data-lazy-srcset +2. Import it: import lazyload from '@theoutfit/lazyload' +3. Call it: lazyload() +4. Adjust your code: + * change every img element’s src attribute to data-lazy-src + * change every img element’s srcset attribute to data-lazy-srcset * add a loading="lazy" attribute to every img element * add a lazy-bg class to every element with a background-image * add this rule to your CSS: ```css .lazy-bg { background-image: none !important; - } + } ``` ## License diff --git a/demo/index.html b/demo/index.html index aa97734..c9e88ed 100644 --- a/demo/index.html +++ b/demo/index.html @@ -9,11 +9,13 @@
+

lazyload

-

lazyload is a little bit of JavaScript (826 bytes) that tries to polyfill lazy loading support for <img> elements, <picture> elements, and CSS background images.

+

lazyload is a little bit of JavaScript (826 bytes) that tries to polyfill lazy loading support for <img> elements, <picture> elements, and CSS background images.

If lazy loading is natively supported already, lazyload will know and get out of the way.

lazyload on GitHub

+

Demo

To best demonstrate how images lazy load, they need to be very far away from the bottom-edge of your browser’s viewport, so … start scrolling (please, and thank you).

Oh, also, if you'd like to see them load lazily:

@@ -24,16 +26,17 @@

Demo

  • Notice that each image isn’t requested until it’s near the bottom-edge
    • + -

    Demo #1: An <img> element with src and srcset

    + +

    Demo #1: An <img> element with src and srcset

    A pretty marsh @@ -43,7 +46,8 @@

    Demo #1: An <img> element with src and -

    Demo #2: An <img> element with src, srcset, and sizes

    + +

    Demo #2: An <img> element with src, srcset, and sizes

    A pretty marsh -

    Demo #3: A <picture> element with src and srcset

    + + +

    Demo #3: A <picture> element with src and srcset

    Demo #3: A <picture> element with src and -

    Demo #4: A CSS background-image

    + +

    Demo #4: A CSS background-image

    <!-- HTML: -->
@@ -88,17 +95,19 @@ 
    Demo #4: A CSS background-image
    
 }
    +

    Add lazyload to your project

      -
    1. Install it: npm i @theoutfit/lazyload --save
      2. -
    2. Call it: lazyload()
      3. +
    3. Install it: npm i @theoutfit/lazyload --save
      4. +
    4. Import it: import lazyload from '@theoutfit/lazyload'
      5. +
    5. Call it: lazyload()
    6. Adjust your code:
        -
      • change every src attribute to data-lazy-src
        • -
      • change every srcset attribute to data-lazy-srcset
        • -
      • add a loading="lazy" attribute to every img element
        • -
      • add a lazy-bg class to every element with a background-image
        • -
      • add this rule to your CSS: 
        .lazy-bg {
+            
      • change every img element’s src attribute to data-lazy-src
        • 
+            
      • change every img element’s srcset attribute to data-lazy-srcset
        • 
+            
      • add a loading="lazy" attribute to every img element
        • 
+            
      • add a lazy-bg class to every element with a background-image
        • 
+            
      • add this rule to your CSS: 
        .lazy-bg {
   background-image: none !important;
 }
        •
      @@ -106,10 +115,12 @@

      Add lazyload to your project

    Learn more

    +

    Questions / issues / improvements

    If you have any questions, if you’ve discovered an issue, or if you can think of any improvements, please let us know:

    lazyload Issues

    +

    Brought to you by

    diff --git a/demo/styles.css b/demo/styles.css index 419036c..b7fdf2b 100644 --- a/demo/styles.css +++ b/demo/styles.css @@ -1,6 +1,7 @@ html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; color: #222; + line-height: 1.5; } body { @@ -104,8 +105,15 @@ h2, h3 { margin-top: 3em; } +.inline-code { + background-image: linear-gradient(90deg, hsl(194,74%,95%),hsl(266,74%,95%),hsl(338,74%,95%),hsl(50,74%,95%),hsl(122,74%,95%)); + font-size: 16px; +} + .code-block { - background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px,transparent 10px, transparent 11px),repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px,transparent 10px, transparent 11px),linear-gradient(90deg, hsl(194,74%,56%),hsl(266,74%,56%),hsl(338,74%,56%),hsl(50,74%,56%),hsl(122,74%,56%)); + background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px,transparent 10px, transparent 11px), + repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px,transparent 10px, transparent 11px), + linear-gradient(90deg, hsl(194,74%,56%),hsl(266,74%,56%),hsl(338,74%,56%),hsl(50,74%,56%),hsl(122,74%,56%)); color: #eee; margin-top: 1em; padding-left: 1em; diff --git a/package.json b/package.json index d37ef02..0b191d4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@theoutfit/lazyload", - "version": "1.0.0", + "version": "1.0.1", "description": "This fills a few gaps in image lazy-loading support; it covers the various ways you can use elements, elements, and CSS background images … but it gets out of the way if the environment natively supports lazy-loading.", "main": "dist/lazyload.min.js", "scripts": {