-
-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #35 from shinsenter/develop
Fixed lazy loading media tags
- Loading branch information
Showing
6 changed files
with
12 additions
and
12 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <!doctypehtml><html lang="en"><meta charset="utf-8"><title>@shinsenter/defer.js - Easily lazy-load JS, CSS, images, iframes</title><link rel="dns-prefetch"href="https://cdn.jsdelivr.net"><link rel="preconnect"href="https://cdn.jsdelivr.net"crossorigin="crossorigin"><script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected]/dist/defer_plus.min.js"></script><script type="deferjs">'IntersectionObserver'in window||deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected]/dist/polyfill.min.js', 'polyfill-js', 1)</script><meta http-equiv="X-UA-Compatible"content="IE=Edge"><meta name="mobile-web-app-capable"content="yes"><meta name="HandheldFriendly"content="True"><meta name="MobileOptimized"content="375"><meta name="viewport"content="initial-scale=1,maximum-scale=1,width=device-width"><meta name="description"content="🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website."><meta name="keywords"content="defer.js,defer,lazyload,fast,pagespeed,javascript,css,style,image,iframe"><meta name="twitter:image"content="https://appseeds.net/defer.js/assets/scores.jpg"><meta name="twitter:card"content="summary_large_image"><meta name="twitter:image:alt"content="Archive 100/100 Google PageSpeed score"><meta name="twitter:card"content="summary_large_image"><meta property="og:title"content="Easily lazy-load JS, CSS, images, iframes"><meta property="og:description"content="🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website."><meta property="og:image"content="https://appseeds.net/defer.js/assets/scores.jpg"><meta property="og:url"content="https://appseeds.net/defer.js/demo.html"><meta property="og:site_name"content="shinsenter/defer.js"><link rel="canonical"href="https://appseeds.net/defer.js/demo.html"><style>html{box-sizing:border-box;font-family:Helvetica,Arial;font-size:16px}*,:after,:before{box-sizing:inherit}section{margin:8em auto}div,h1,h2,p{margin:1em auto;padding:0;font-weight:400;overflow:auto}p{margin:.5em auto}h1 small{display:block;color:#555;font-family:monospace;font-size:1.3rem;margin-top:.5em;padding-left:10px;border-left:5px solid #ccc}#lang li,h1 span{display:inline-block}body{top:0!important;margin:0;padding:1em 2em}li{line-height:2}code,pre{margin:0;font-size:smaller}pre code{display:block;overflow-x:auto;padding:.5em}#lang,div.aspect>*{position:absolute;top:0}#lang{margin:0;padding:0 .5rem;list-style:none;text-align:right;right:2em;background:#f0f0f0;border-radius:0 0 .5em .5em;z-index:10}#lang li{line-height:2;text-align:center}#lang li a{padding:0 .5em;display:block}code,img,pre,table{max-width:100%;height:auto}iframe,table{border:0;width:100%}td{padding:2vw;vertical-align:middle}.big{font-size:large}.fade{transition:opacity .5s ease-in-out;opacity:0}.fade.show{opacity:1;background:0 0}.long-content{display:none;height:50rem;background:#fafafa}.addthis_inline_share_toolbox,.fb-like{margin:0}.fb-like *{max-width:100%;height:auto}.center{text-align:center}.w640{max-width:640px}div.aspect{position:relative;max-width:100%;padding-bottom:75%;margin:0;background:#ddd;vertical-align:top}div.aspect.r16-9{padding-bottom:56.25%}div.aspect>*{left:0;top:0;width:100%;height:100%;object-fit:contain;vertical-align:top;z-index:2}sup{font-size:.8em;color:red}#gt-nvframe{top:-1000px!important;visibility:hidden!important}div.aspect>.loading{display:none;width:40px;height:40px;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.loading:after{content:" ";display:block;width:40px;height:40px;margin:0;border-radius:50%;border:3px solid #fafafa;border-color:#fafafa transparent;animation:loading 1s linear infinite}div.aspect>.lazied+.loading{display:inline-block}div.aspect>.show+.loading{display:none;z-index:1}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style><script type="deferjs">// For Google Analytics | ||
| <!doctypehtml><html lang="en"><meta charset="utf-8"><title>@shinsenter/defer.js - Easily lazy-load JS, CSS, images, iframes</title><link rel="dns-prefetch"href="https://cdn.jsdelivr.net"><link rel="preconnect"href="https://cdn.jsdelivr.net"crossorigin="crossorigin"><script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected]/dist/defer_plus.min.js"></script><script type="deferjs">'IntersectionObserver'in window||deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected]/dist/polyfill.min.js', 'polyfill-js', 1)</script><meta http-equiv="X-UA-Compatible"content="IE=Edge"><meta name="mobile-web-app-capable"content="yes"><meta name="HandheldFriendly"content="True"><meta name="MobileOptimized"content="375"><meta name="viewport"content="initial-scale=1,maximum-scale=1,width=device-width"><meta name="description"content="🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website."><meta name="keywords"content="defer.js,defer,lazyload,fast,pagespeed,javascript,css,style,image,iframe"><meta name="twitter:image"content="https://appseeds.net/defer.js/assets/scores.jpg"><meta name="twitter:card"content="summary_large_image"><meta name="twitter:image:alt"content="Archive 100/100 Google PageSpeed score"><meta name="twitter:card"content="summary_large_image"><meta property="og:title"content="Easily lazy-load JS, CSS, images, iframes"><meta property="og:description"content="🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website."><meta property="og:image"content="https://appseeds.net/defer.js/assets/scores.jpg"><meta property="og:url"content="https://appseeds.net/defer.js/demo.html"><meta property="og:site_name"content="shinsenter/defer.js"><link rel="canonical"href="https://appseeds.net/defer.js/demo.html"><style>html{box-sizing:border-box;font-family:Helvetica,Arial;font-size:16px}*,:after,:before{box-sizing:inherit}section{margin:8em auto}div,h1,h2,p{margin:1em auto;padding:0;font-weight:400;overflow:auto}p{margin:.5em auto}h1 small{display:block;color:#555;font-family:monospace;font-size:1.3rem;margin-top:.5em;padding-left:10px;border-left:5px solid #ccc}#lang li,h1 span{display:inline-block}body{top:0!important;margin:0;padding:1em 2em}li{line-height:2}code,pre{margin:0;font-size:smaller}pre code{display:block;overflow-x:auto;padding:.5em}#lang,div.aspect>*{position:absolute;top:0}#lang{margin:0;padding:0 .5rem;list-style:none;text-align:right;right:2em;background:#f0f0f0;border-radius:0 0 .5em .5em;z-index:10}#lang li{line-height:2;text-align:center}#lang li a{padding:0 .5em;display:block}code,img,pre,table{max-width:100%;height:auto}iframe,table{border:0;width:100%}td{padding:2vw;vertical-align:middle}.big{font-size:large}.fade{transition:opacity .5s ease-in-out;opacity:0}.fade.show{opacity:1;background:0 0}.long-content{display:none;height:50rem;background:#fafafa}.addthis_inline_share_toolbox,.fb-like{margin:0}.fb-like *{max-width:100%;height:auto}.center{text-align:center}.w640{max-width:640px}div.aspect{position:relative;max-width:100%;padding-bottom:75%;margin:0;background:#ddd;vertical-align:top}div.aspect.r16-9{padding-bottom:56.25%}div.aspect>*{left:0;top:0;width:100%;height:100%;object-fit:contain;vertical-align:top;z-index:2}sup{font-size:.8em;color:red}#gt-nvframe{top:-1000px!important;visibility:hidden!important}div.aspect>.loading{display:none;width:40px;height:40px;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.loading:after{content:" ";display:block;width:40px;height:40px;margin:0;border-radius:50%;border:3px solid #fafafa;border-color:#fafafa transparent;animation:loading 1s linear infinite}div.aspect>.lazied+.loading{display:inline-block}div.aspect>.show+.loading{display:none;z-index:1}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style><script type="deferjs">// For Google Analytics | ||
| window.dataLayer = window.dataLayer || []; | ||
|
|
||
| function gtag() { | ||
|
|
@@ -24,10 +24,10 @@ | |
| }); | ||
| });</script><body id="top"><h1>Easily lazy-load JS, CSS, images, iframes <small>A demo using <span>@shinsenter / defer.js</span></small></h1><div id="fb-root"></div><ul id="lang"class="notranslate"><li><a title="English"rel="alternate"hreflang="en"onclick='return!(top.location.href="https://appseeds.net/defer.js/demo.html")'href="https://appseeds.net/defer.js/demo.html">EN</a><li><a title="日本語翻訳"rel="alternate"hreflang="ja"onclick='return!(top.location.href="https://translate.google.com/translate?hl=&sl=auto&tl=ja&u=https%3A%2F%2Fappseeds.net%2Fdefer.js%2Fdemo.html")'href="https://translate.google.com/translate?hl=&sl=auto&tl=ja&u=https%3A%2F%2Fappseeds.net%2Fdefer.js%2Fdemo.html">JA</a><li><a title="Tiếng Việt"rel="alternate"hreflang="vi"onclick='return!(top.location.href="https://translate.google.com/translate?hl=&sl=auto&tl=vi&u=https%3A%2F%2Fappseeds.net%2Fdefer.js%2Fdemo.html")'href="https://translate.google.com/translate?hl=&sl=auto&tl=vi&u=https%3A%2F%2Fappseeds.net%2Fdefer.js%2Fdemo.html">VI</a></ul><div class="addthis_inline_share_toolbox"data-url="https://github.com/shinsenter/defer.js"data-title="defer.js - A super tiny script to efficiently load JS, CSS, images, iframes - @shinsenter / defer.js"data-description="🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website."></div><section id="deferjs-usage"><h2 id="getting-started">Getting started</h2><div><p>You only need to load this library <sup>(*)</sup> once on a page, ideally right after the opening <code><head></code> tag:</p><br><pre class="notranslate"><code>Code:</code><code class="highlight html"><head> | ||
| <title>My awesome page</title> | ||
| <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].9/dist/defer_plus.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].10/dist/defer_plus.min.js"></script> | ||
|
|
||
| <!-- You may want to add small polyfill for IE 9~11 --> | ||
| <script>deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].9/dist/polyfill.min.js', 'polyfill-js', 1)</script> | ||
| <script>deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].10/dist/polyfill.min.js', 'polyfill-js', 1)</script> | ||
| </head></code></pre><p>Because the <a href="https://github.com/shinsenter/defer.js/blob/master/defer_plus.min.js"target="_blank"title="minified version of defer.js">minified version</a> of defer.js is super tiny, you can inline its content directly into the HTML document and avoid the network request.<p><small><sup>(*)</sup> Examples on this page are using <a href="https://github.com/shinsenter/defer.js/blob/master/README.md#extended-deferjs"title="Extended version defer_plus.min.js"target="_blank">extended version</a> of <a href="https://github.com/shinsenter/defer.js/"title="Visit defer.js on GitHub"target="_blank">defer.js</a>.</small></div><div id="easiest-way"><h3>The easiest way to defer JavaScript</h3><p>The easiest way to delay the execution of the existing <code><script></code> tags on your site is to modify the <code>type</code> attribute of the tag to <code>deferjs</code> <u>(except the one which contains defer_plus.min.js or defer.min.js)</u>.<p>For example: if we have 2 script tags like this.<pre class="notranslate"><code>Code:</code><code class="highlight html"><script type="text/javascript">/* my inline script */</script> | ||
| <script type="text/javascript" src="path/to/my/script.js"></script></code></pre><p>Just change `type="text/javascript"` to `type="deferjs"`, like this:<pre class="notranslate"><code>Code:</code><code class="highlight html"><script type="deferjs">/* my inline script */</script> | ||
| <script type="deferjs" src="path/to/my/script.js"></script></code></pre><p><i>Note: This method can only be used since version 1.1.5.</i></div><div id="developer-tool"><p>You can use browser's <strong>Developer Tool</strong> (press F12 key) to watch how requests are sent.<p>Looking for a complex demo? Check this <a href="#wordpress-demo"title="Wordpress demo">Wordpress demo</a>.<p>Or slowly scroll down to view how images and video are lazy-loaded.</div><div id="lazyload-widgets"><p><strong>But wait.</strong> Do you notice that there is a share buttons block on <a href="#top">the top</a>?<p>Your browser loaded it after 3 seconds since your page fired the 'load' event. There is a Facebook widget at the bottom, too. Here is how to load them without blocking page load speed:</p><br><pre class="notranslate"><code>Code:</code><code class="highlight html"><script type="text/javascript"> | ||
|
|
||
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "@shinsenter/defer.js", | ||
| "version": "1.1.9", | ||
| "version": "1.1.10", | ||
| "description": "🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website. https://github.com/shinsenter/defer.js", | ||
| "homepage": "https://github.com/shinsenter/defer.js#readme", | ||
| "author": "Mai Nhut Tan <[email protected]>", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -39,11 +39,11 @@ | |
| <link rel="dns-prefetch" href="https://cdn.jsdelivr.net"> | ||
| <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="crossorigin"> | ||
|
|
||
| <!-- <script src="../dist/defer_plus.min.js?v=1.1.9"></script> --> | ||
| <!-- <script src="../dist/defer_plus.min.js?v=1.1.10"></script> --> | ||
| <!-- <script type="deferjs">'IntersectionObserver'in window||deferscript('../dist/polyfill.min.js', 'polyfill-js', 1)</script> --> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].9/dist/defer_plus.min.js"></script> | ||
| <script type="deferjs">'IntersectionObserver'in window||deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].9/dist/polyfill.min.js', 'polyfill-js', 1)</script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].10/dist/defer_plus.min.js"></script> | ||
| <script type="deferjs">'IntersectionObserver'in window||deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].10/dist/polyfill.min.js', 'polyfill-js', 1)</script> | ||
|
|
||
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | ||
| <meta name="mobile-web-app-capable" content="yes"> | ||
|
|
@@ -346,10 +346,10 @@ <h2 id="getting-started">Getting started</h2> | |
| <br /> | ||
| <pre class="notranslate"><code>Code:</code><code class="highlight html"><head> | ||
| <title>My awesome page</title> | ||
| <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].9/dist/defer_plus.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].10/dist/defer_plus.min.js"></script> | ||
|
|
||
| <!-- You may want to add small polyfill for IE 9~11 --> | ||
| <script>deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].9/dist/polyfill.min.js', 'polyfill-js', 1)</script> | ||
| <script>deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].10/dist/polyfill.min.js', 'polyfill-js', 1)</script> | ||
| </head></code></pre> | ||
| <p>Because the <a href="https://github.com/shinsenter/defer.js/blob/master/defer_plus.min.js" target="_blank" title="minified version of defer.js">minified version</a> of defer.js is super | ||
| tiny, you can inline its content directly into the | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters