diff --git a/images/80placeholder.jpg b/images/80placeholder.jpg new file mode 100644 index 0000000..a3f83dd Binary files /dev/null and b/images/80placeholder.jpg differ diff --git a/images/dotted-shape.svg b/images/dotted-shape.svg new file mode 100644 index 0000000..226bcfd --- /dev/null +++ b/images/dotted-shape.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/hero-image.jpg b/images/hero-image.jpg new file mode 100644 index 0000000..b85bc90 Binary files /dev/null and b/images/hero-image.jpg differ diff --git a/images/maps.jpg b/images/maps.jpg new file mode 100644 index 0000000..a3123c0 Binary files /dev/null and b/images/maps.jpg differ diff --git a/index.html b/index.html index 1c00447..6acf545 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - LazyframeAdvanced Demo + LazyframeAdvanced - Lazyload your iframes - dependency-free library + @@ -36,8 +37,8 @@ width: 100%; display: block; font-size: 32px; - font-family: Arial; - color: #fff; + color: #000000; + text-shadow: 10px 1px 0 rgba(255, 255, 255, .06); } .lazyframe--custom::before { @@ -47,128 +48,205 @@ -
- -
-
-

LazyframeAdvanced

-

Dependency-free library for lazyloading iframes

-

https://jmartsch.github.io/lazyframeAdvanced

-
-
- - -
-
-

How it works

-

Lazyframe creates a responsive placeholder for embedded content and only - requests it when the user - interacts with - it. This decreases the page load and idle time. Lazyframe comes with brand-like themes for YouTube, Vimeo and - Vine.

-

Why?

-

Because the JavaScript loaded from the external providers is big and - takes much time to load. This - slows down your site, even if your visitors don't want to see your beautiful videos. -

-

For example here are the number of requests and filesizes of some well-known services.

-
    -
  • - YouTube – 11 requests ≈ 580kb -
    • -
  • - Google maps – 52 requests ≈ 580kb -
    • -
  • - Vimeo – 8 requests ≈ 145kb -
    • -
+
+
+
+
+
+
+

+ Lazyframe Advanced +

+

+ a dependency-free library to lazyload iframes and save bandwidth and memory +

+ +
+ +
+ hero-image + shape + shape +
+
-
- -
-
+
+
+ +
+

+ Why would you use it? +

+

JavaScripts loaded from external providers like YouTube or Vimeo or Google Maps are big and waste precious bandwidth (especially on mobile). This slows down the loading of your website, even if your visitors don't want to see your beautiful videos or embeds. +

+

For example here are the number of requests and filesizes of some well-known services:

+
    +
  • + YouTube – 11 requests ≈ 1099kb (over a megabyte) 😲 +
    • +
  • + Google maps – 52 requests ≈ 520kb 😲 +
    • +
  • + Vimeo – 8 requests ≈ 232kb 😲 +
    • +
+
+
+

+ What does it do? +

+

LazyframeAdvanced creates a responsive placeholder (and a placholder image from noembed.com or your custom one) for embedded content and only requests its content and scripts when the user interacts with it.

+

This decreases the page load and idle time. LazyframeAdvanced comes with brand-like themes for YouTube and Vimeo.

+

The thumnail placeholder is only loaded when the frame is in view, this saves additional bandwidth. +

+
+ + +
+

Examples

-
-
-
+
+
+
-

Embed YouTube video with thumbnail and title from - API -

+

YouTube video with thumbnail and title from noembed.com

-
+
-
+
-

Embed YouTube video with custom preview image and +

YouTube video with custom thumbnail image and custom title

-
-
-
-
-
+
+
+
-

Embed Vimeo video with thumbnail and title from - API -

-
-
-
-
-

Embed Vimeo video with custom thumbnail and - title +

Vimeo video with thumbnail and title from + noembed.com +

+
+
+
+
+
+
+

Google maps iframe with static placeholder image

-
-
-
-
-
+
+
+
-

Custom Iframe -

-
-
-
-
-
-

Google maps iframe with custom thumbnail and - title that gets executed when in view -

-
-
-
-
+

Custom iframe with a Surveymonkey form +

-
- -
-
-

Need Help? Found a bug?

-

File an issue on GitHub

+
+ +

This video from vimeo has the data-initinview parameter set to to true, so it autoplays, when it enters the viewport +

+
+
-
- -
- + + +
+
+ +
+
+

Need Help? Found a bug?

+

File an + issue on GitHub +

+
+
+ +
+ diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..1695c69 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,15 @@ +module.exports = { + theme: { + // ... + }, + // You have to disable the fontSize core + // plugins otherwise it doesn't work + corePlugins: { + fontSize: false, + // ... + }, + plugins: [ + require('tailwindcss-fluid-type'), + // ... + ], +};