Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lazy loading added to images in try_docsie page #98

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

lazy loading added to images in try_docsie page #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8456fa5
added lazy loading
ramu-narasinga Feb 16, 2021
053a86f
added lazy loading configuration to images in try_docsie html file
ramu-narasinga Feb 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@

<link rel="stylesheet" href='/style.css'>
<link rel="stylesheet" href="/lang-picker.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script> -->

{% block styles %}
{% endblock styles %}
Expand Down Expand Up @@ -216,7 +216,13 @@

{% endblock scripts %}
<!-- End Alexa Certify Javascript -->
lazyLoadInstance.update();
<!-- lazyLoadInstance.update(); -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>
<script>
(function () {
var ll = new LazyLoad({});
})();
</script>
</body>

</html>
100 changes: 50 additions & 50 deletions src/try_docsie/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,55 +43,55 @@
What can Docsie do for my company?</h2>
<ul id="crossfader" class="w-full lg:w-4/5 xl:w-6/12 h-300 md:h-500 lg:h-600 relative mx-auto md:mb-10">
<li class="block absolute z-0 text-center bg-white" style="display: block; z-index: 1;"><img
class="h-auto mx-auto mb-5"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/1ob5ban-organize-documentation_10pc0gw0p80gw002000028.png"
class="h-auto mx-auto mb-5 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/1ob5ban-organize-documentation_10pc0gw0p80gw002000028.png"
alt="">
<p class="text-lg md:text-2xl font-semibold">Organized documentation so you find it when you need it!</p>
</li>
<li class="block absolute z-0 text-center bg-white" style="z-index: 1; display: block;"><img
class="h-auto mx-auto mb-5"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/12bhtx5-5_10pc0gw0p80gw002000028.png"
class="h-auto mx-auto mb-5 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/12bhtx5-5_10pc0gw0p80gw002000028.png"
alt="">
<p class="text-lg md:text-2xl font-semibold">Lightning fast amazing search to help you find the docs you need</p>
</li>
<li class="block absolute z-0 text-center bg-white" style="z-index: 1; display: block;"><img
class="h-auto mx-auto mb-5"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/jpsg0p-4_10pc0gw0p80gw002000028.png"
class="h-auto mx-auto mb-5 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/jpsg0p-4_10pc0gw0p80gw002000028.png"
alt="">
<p class="text-lg md:text-2xl font-semibold"> Publish documentation in multiple versions and languages
</p>
</li>
<li class="block absolute z-0 text-center bg-white" style="z-index: 1; display: block;"><img
class="h-auto mx-auto mb-5"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/1dtr4m5-3_10pc0gw0p80gw002000028.png"
class="h-auto mx-auto mb-5 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/1dtr4m5-3_10pc0gw0p80gw002000028.png"
alt="">
<p class="text-lg md:text-2xl font-semibold">Collect data of customer satisfaction and activity in real time</p>
</li>
<li class="block absolute z-0 text-center bg-white active" style="z-index: 3; display: block;"><img
class="h-auto mx-auto mb-5"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/guuz38-2_10pc0gw0p80gw002000028.png"
class="h-auto mx-auto mb-5 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/guuz38-2_10pc0gw0p80gw002000028.png"
alt="">
<p class="text-lg md:text-2xl font-semibold"> Easily publish multiple documentation portals</p>
</li>
</ul>
<ul class="block sm:flex flex-row flex-wrap justify-center ">
<li class="flex text-left p-3 md:p-5"><img class="mr-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
<li class="flex text-left p-3 md:p-5"><img class="mr-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
class="flex-grow">Organize documentation</span></li>
<li class="flex text-left p-3 md:p-5"><img class="mr-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
<li class="flex text-left p-3 md:p-5"><img class="mr-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
class="flex-grow">Find everything on the shelves</span></li>
<li class="flex text-left p-3 md:p-5"><img class="mr-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
<li class="flex text-left p-3 md:p-5"><img class="mr-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
class="flex-grow">Manage translations and versions</span></li>
<li class="flex text-left p-3 md:p-5"><img class="mr-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
<li class="flex text-left p-3 md:p-5"><img class="mr-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
class="flex-grow">Define workflows and tasks</span></li>
<li class="flex text-left p-3 md:p-5"><img class="mr-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
<li class="flex text-left p-3 md:p-5"><img class="mr-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
class="flex-grow">Publish to your website</span></li>
<li class="flex text-left p-3 md:p-5"><img class="mr-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
<li class="flex text-left p-3 md:p-5"><img class="mr-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/656e76a9-done.svg" alt=""><span
class="flex-grow">Gather actionable feedback</span></li>
</ul>
</section>
Expand All @@ -101,36 +101,36 @@
How to use Docsie to supercharge your documentation workflow?</h3>
<ul class="block sm:flex flex-row flex-wrap justify-center lg:px-10">
<li class="w-full md:w-1/2 lg:w-1/3 p-2 lg:p-8 text-center flex-grow-0"><img
class="w-auto h-auto mx-auto mb-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/4c7e9928-4-optimzed.gif" alt="">
class="w-auto h-auto mx-auto mb-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/4c7e9928-4-optimzed.gif" alt="">
<p class="text-2xl font-bold mb-4">UseOne Platform</p>
<p>Reduce your tech expenses by combining all your documentation tools into one platform. Create and manage
any kind of doc, in any language, and sort through them all with Docsie's advanced search.</p>
</li>
<li class="w-full md:w-1/2 lg:w-1/3 p-2 lg:p-8 text-center flex-grow-0"><img
class="w-auto h-auto mx-auto mb-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/0f22fad7-2-optmized.gif" alt="">
class="w-auto h-auto mx-auto mb-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/0f22fad7-2-optmized.gif" alt="">
<p class="text-2xl font-bold mb-4">To Gain A Competitive Edge</p>
<p>Streamline your creation process with fully customizable collaboration, version management, and
specialized editing tools that are proven to quadruple your creation speed.</p>
</li>
<li class="w-full md:w-1/2 lg:w-1/3 p-2 lg:p-8 text-center flex-grow-0"><img
class="w-auto h-auto mx-auto mb-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/1b74c4d3-3-optmized.gif" alt="">
class="w-auto h-auto mx-auto mb-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/1b74c4d3-3-optmized.gif" alt="">
<p class="text-2xl font-bold mb-4">With Automated Translation</p>
<p>Expand into international markets by offering translated documentation in any language - all
automatically updated by experts on our translation marketplace.</p>
</li>
<li class="w-full md:w-1/2 lg:w-1/3 p-2 lg:p-8 text-center flex-grow-0"><img
class="w-auto h-auto mx-auto mb-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/b6e817ac-1-optimized.gif" alt="">
class="w-auto h-auto mx-auto mb-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/b6e817ac-1-optimized.gif" alt="">
<p class="text-2xl font-bold mb-4">Brandable Experiences</p>
<p>Work with our design team to tailor your Docsie portal into a beautiful, brand-aligned platform featuring
landing pages, document templates, colors, and logos that your team and customers will love.</p>
</li>
<li class="w-full md:w-1/2 lg:w-1/3 p-2 lg:p-8 text-center flex-grow-0"><img
class="w-auto h-auto mx-auto mb-4"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/60c86058-5-optimzed.gif" alt="">
class="w-auto h-auto mx-auto mb-4 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/60c86058-5-optimzed.gif" alt="">
<p class="text-2xl font-bold mb-4">Seamless Publishing</p>
<p>Switch your docs to public with the press of a button and allow your customers to search and discover
your library of beautiful, branded product documentation so they can find the solutions to their problems
Expand All @@ -146,8 +146,8 @@
<div id="slider" class="w-full bg-white overflow-hidden">
<div id="slide-container" style="width: 3810px;">
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/2ae1e6af-ibvpsrko-400x400_101901900000000000001o.jpg"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/2ae1e6af-ibvpsrko-400x400_101901900000000000001o.jpg"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">Katherine Santos</h4>
Expand All @@ -157,8 +157,8 @@ <h6 class="text-sm text-gray-500 mb-4">Product Manager @ Telecommunications 5001
</div>
</div>
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/13144976-mark-f_101c01c00000000000001o.jpg"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/13144976-mark-f_101c01c00000000000001o.jpg"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">Oliver Popp</h4>
Expand All @@ -170,8 +170,8 @@ <h6 class="text-sm text-gray-500 mb-4">Product Marketing Manager @ Telecommunica
</div>
</div>
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/e51f3881-andrew-ross-removebg-preview_1000000000000000000028.png"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/e51f3881-andrew-ross-removebg-preview_1000000000000000000028.png"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">Andrew Ross</h4>
Expand All @@ -181,8 +181,8 @@ <h6 class="text-sm text-gray-500 mb-4">Product Manager @ Automotive 201 - 500 Em
</div>
</div>
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/dc784b28-xzawmtkxntcuanbn_101a01900000000000001o.jpg"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/dc784b28-xzawmtkxntcuanbn_101a01900000000000001o.jpg"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">Carry Lin</h4>
Expand All @@ -193,8 +193,8 @@ <h6 class="text-sm text-gray-500 mb-4">Director of Product @ Fintech 501 - 1000
</div>
</div>
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/842f256a-fc50719e732f9f60411dd86d077a5000_101i01i00000000000001o.jpeg"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/842f256a-fc50719e732f9f60411dd86d077a5000_101i01i00000000000001o.jpeg"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">Meng Xi</h4>
Expand All @@ -204,8 +204,8 @@ <h6 class="text-sm text-gray-500 mb-4">QA Lead @ Financial Services 1001 - 5000
</div>
</div>
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/46e99ede-xza5mje4nzeuanbn_101601600000000000001o.jpg"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/46e99ede-xza5mje4nzeuanbn_101601600000000000001o.jpg"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">Ravindra Singh</h4>
Expand All @@ -215,8 +215,8 @@ <h6 class="text-sm text-gray-500 mb-4">Product Owner @ Computer Software 51 - 20
</div>
</div>
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/b238c0ce-olver-popp_102b02a000000000000028.png"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/b238c0ce-olver-popp_102b02a000000000000028.png"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">Tim Dorn</h4>
Expand All @@ -226,8 +226,8 @@ <h6 class="text-sm text-gray-500 mb-4">VP of Product @ Wireless 11 - 50 Employee
</div>
</div>
<div class="slide float-left text-center w-80" style="width: 476.25px; margin-left: 0px;">
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full"
src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/325a45cf-jeton_101f01e000000000000028.png"
<div><img class="h-20 w-20 p-1 mx-auto mb-5 shadow-md rounded-full lazy"
data-src="https://d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/325a45cf-jeton_101f01e000000000000028.png"
alt=""></div>
<div class="px-12">
<h4 class="text-lg md:text-2xl mb-2 font-semibold">David T</h4>
Expand All @@ -241,8 +241,8 @@ <h6 class="text-sm text-gray-500 mb-4">Director of IT @ ITS 201 - 500 Employees<
</div>
<section
class="container mx-auto text-gray-600 text-center px-8 sm:px-14 mt-20 sm:mt-40 mb-20 sm:mb-40 max-w-screen-md bgfbus327g">
<img class="w-auto h-auto ml-5 sm:ml-10"
src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/719e0d9f-arrow-removebg-preview_108607f08507f000000028.png">
<img class="w-auto h-auto ml-5 sm:ml-10 lazy"
data-src="//d9hhrg4mnvzow.cloudfront.net/get.docsie.io/free_trial-1/719e0d9f-arrow-removebg-preview_108607f08507f000000028.png">
<h2
class="mx-auto text-4xl sm:text-5xl leading-none font-extrabold text-gray-900 tracking-tight mb-8 max-w-screen-lg">
Are you ready to use simple yet powerful documentation tools?</h2>
Expand Down