OptimizeLazyLoader Demo Page

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis corrupti, ad. Eum consectetur, veritatis aliquid nemo aliquam nesciunt soluta ipsum facere delectus accusantium necessitatibus similique, ad facilis quos, aperiam non.

Esse eum delectus facilis, voluptas, laudantium vero repellendus incidunt dolorem hic quam accusantium, sed asperiores. Sequi quis magni, velit laudantium quasi? Minima pariatur ipsa, odio, cum reprehenderit natus laudantium inventore.

Fuga sit autem suscipit corporis, temporibus consequatur nisi asperiores ipsam quis deserunt, est architecto quidem praesentium harum adipisci dolorem unde modi, sint perferendis amet beatae rerum! Omnis quis nulla libero.

Ipsam nostrum at sed, sunt, recusandae fugit veniam quibusdam, inventore quisquam distinctio neque ad corporis dolorum est, obcaecati rem laboriosam hic saepe quos facere perferendis! Accusantium autem voluptatibus modi repudiandae.

Similique molestiae fuga unde animi ad, consectetur perspiciatis quas, deserunt quisquam omnis possimus veniam odio itaque esse inventore blanditiis quam recusandae ipsa tenetur repellat. Consequatur dolores illum rem quia harum.

Neque labore repellat est ipsa pariatur, ex fugit repudiandae, itaque inventore consectetur amet. Dicta, obcaecati atque dolorum tempora facere eligendi officiis perspiciatis laboriosam quos possimus corrupti quasi assumenda aliquam tenetur.

Molestiae optio velit commodi, harum illo id quod. Ratione sequi eos maxime vel unde alias reprehenderit aspernatur et, dolore tempore repudiandae aliquid laboriosam, facere numquam dolorum voluptate provident accusantium adipisci.

Alias incidunt, culpa corporis reprehenderit! Quia facilis explicabo aut maxime, repellat minima corporis facere aperiam deserunt mollitia culpa pariatur odio, dolores asperiores ullam enim odit tenetur, nam amet, velit rerum.

Perferendis provident veritatis eum nulla omnis iure animi, distinctio nobis ratione, vel, dicta praesentium quasi earum excepturi! Quidem obcaecati totam asperiores praesentium cumque, nobis ipsa et adipisci fugit tempore est.

Ad similique nesciunt aut quod odio tempora aspernatur laboriosam facere officiis expedita dolores molestiae, modi beatae, adipisci alias ea doloremque. Non, omnis! Sapiente dolor blanditiis alias aliquid asperiores assumenda dolorum.

Usage

Add stylesheet to your head tag:

<link rel"stylesheet" href="assets/js/optimize-lazy-loader.css" />

...and script to the end of your body tag:

<script src="assets/js/optimize-lazy-loader.js"></script>

Start lazy-loader:

<script>
    var oll = new OptimizeLazyLoader({
        // context: document,
        // useNative: true,
    });
    oll.start();
</script>

If OptimizeLazyLoader is not supported by your browser (see supported browser list here), the start method will automatically preload all needed assets.

<IMG />

<!-- replace this code -->
<img src="https://miro.medium.com/max/1247/1*7EUX9QIjq2x1JyFKcjhXsA.png" alt="" width="1224" height="618" />

<!-- with this -->
<img class="oll" data-oll-src="https://miro.medium.com/max/1247/1*7EUX9QIjq2x1JyFKcjhXsA.png" alt="" width="1224" height="618" />
<noscript>
    <img src="https://miro.medium.com/max/1247/1*7EUX9QIjq2x1JyFKcjhXsA.png" alt="" width="1224" height="618" />
</noscript>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nesciunt cupiditate dolor maiores pariatur quam quod, saepe hic neque veritatis. Sapiente, numquam sint repudiandae reprehenderit eligendi unde cupiditate provident fugiat.

Voluptate id nulla quod voluptatum suscipit ad harum, dolorem tempora laboriosam repudiandae quis pariatur quia illo ea doloremque, culpa earum fugiat consectetur molestias eligendi a eaque minima consequuntur eos! Eveniet!

Minus, necessitatibus, fugit. Soluta, doloremque officiis repudiandae molestias atque illo nostrum perferendis esse, illum sed est delectus dolor eos. Consequatur facere beatae numquam praesentium, molestiae sequi nisi labore animi. Quam.

Placeat ad doloremque eaque voluptas quasi recusandae eum rerum, magni error, necessitatibus tenetur dolores a. Corrupti voluptate quas assumenda, porro mollitia? Reiciendis vitae eius sapiente dignissimos nam iure nostrum, repudiandae.

Quia quis quos, voluptatem culpa itaque, dignissimos dolores in, beatae enim quibusdam vero ullam atque voluptatibus. Dolore quisquam officia impedit consequatur error provident commodi dolorum pariatur rem, ipsum veritatis, voluptatum!

Sapiente esse facere repellat, soluta amet laboriosam dolore, quasi deserunt ducimus! Quibusdam tempore praesentium impedit, voluptas cumque atque illo reprehenderit optio dignissimos. Ipsam eligendi esse, dolore alias amet vel voluptatum.

Nostrum architecto nam sed necessitatibus esse eaque ad consequuntur, obcaecati maxime quisquam inventore laborum, omnis nulla quo deserunt ex tempore explicabo officiis voluptas consectetur? Blanditiis tenetur nam error magnam a!

Inventore eius quidem a. Deserunt odio quam dolorem sed asperiores rerum officia accusamus incidunt, eaque nostrum! Laborum quas voluptatibus non dolorem tenetur excepturi porro nam, nulla mollitia unde, et quo.

Aliquid, ducimus consequatur assumenda error provident dolorem dignissimos sint a accusamus nulla dolore, facere sit eaque deserunt. Autem commodi, necessitatibus eum! Aspernatur esse tempore labore cupiditate, blanditiis accusantium sequi cumque.

Veniam optio dignissimos fugiat soluta vel neque laudantium pariatur nobis odio beatae. Cupiditate quas nulla ex inventore, minima natus atque. Temporibus mollitia nemo non atque praesentium vero veniam veritatis saepe.

<PICTURE />

<!-- replace this code -->
<picture>
    <source media="(min-width: 640px)" srcset="https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/08/python_tricks.jpg" />
    <img src="https://www.filepicker.io/api/file/BFMMlbcQvml9HSqXcvNp" alt="" />
</picture>

<!-- with this -->
<picture class="oll">
    <source media="(min-width: 640px)" data-oll-srcset="https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/08/python_tricks.jpg" />
    <img data-oll-src="https://www.filepicker.io/api/file/BFMMlbcQvml9HSqXcvNp" alt="" />
</picture>
<noscript>
    <picture>
        <source media="(min-width: 640px)" srcset="https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/08/python_tricks.jpg" />
        <img src="https://www.filepicker.io/api/file/BFMMlbcQvml9HSqXcvNp" alt="" />
    </picture>
</noscript>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore repellat beatae magnam cumque quibusdam, dicta assumenda debitis doloribus, possimus accusamus magni quis iure, aperiam expedita obcaecati voluptatem rem corrupti dolore.

Porro vero, explicabo obcaecati eaque repellendus, reiciendis accusantium, harum distinctio voluptatem modi excepturi at ratione blanditiis praesentium sint eius animi voluptates hic. Asperiores, quibusdam! Consequatur maiores nemo magnam modi nam.

Exercitationem pariatur, sint placeat consectetur impedit iste, aliquid, consequuntur, nemo repudiandae mollitia reiciendis voluptas magni? Totam iste quisquam nemo, tempore adipisci nesciunt, officia architecto quis quam tenetur exercitationem cumque nulla.

Totam magni voluptates doloremque accusamus vero atque laboriosam eaque quam, sequi inventore ab id rem voluptatem nam velit mollitia eveniet tempora nostrum minima fugiat. Dolorum in eligendi soluta, officiis nihil?

Molestiae, optio fugit sapiente, a ratione accusamus ipsum voluptatum pariatur delectus maiores voluptas exercitationem. Vitae repellat dignissimos officia, sint, reiciendis a fugiat veritatis facilis, voluptas eveniet ipsum illum quaerat cupiditate.

Corporis architecto obcaecati repudiandae optio quibusdam, exercitationem esse in tempora, vel quas est amet odit fugiat repellat quisquam. Veritatis facilis, recusandae esse delectus beatae atque explicabo qui perferendis aspernatur unde!

Similique magnam fugit tenetur est, natus, vero iusto, dolorum autem fuga illum, at ipsum pariatur. Illo voluptatibus nam in vitae voluptatum officia architecto adipisci assumenda aliquid necessitatibus, numquam, fuga cumque.

Odit accusamus asperiores, quibusdam, odio sequi, fugit officiis eligendi itaque possimus libero ea ratione cum dolorem facere a voluptatum sunt praesentium omnis! Omnis facilis aliquam obcaecati vel. Recusandae, autem, quo.

Pariatur nisi consequuntur error, laudantium, eveniet hic vitae ad vero dolores unde maiores maxime vel aliquid sapiente sit, aspernatur deserunt neque eaque. Voluptate explicabo quidem porro, laudantium. Obcaecati, fuga, distinctio.

Sapiente aperiam aliquam dolores facere quos dolorem perferendis nam accusantium, soluta voluptatem optio mollitia nulla debitis et atque. Debitis quasi, repellendus amet, enim ipsa cum impedit ratione dolores labore quod.

<IFRAME />

<!-- replace this code -->
<iframe width="1280" height="720" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!-- with this -->
<iframe class="oll" width="1280" height="720" data-oll-src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<noscript>
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</noscript>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate cum ut ipsa consequuntur amet, eos facere alias quis, totam! Quis sequi delectus nemo fugiat aut eum esse, optio, assumenda accusamus!

Perspiciatis voluptatibus delectus ratione facilis suscipit deleniti veniam, ipsum laboriosam sed dignissimos quis sit excepturi saepe officiis tempore nisi dolore vel itaque eius error atque autem nihil fugit nostrum repudiandae!

Sed doloribus laboriosam, cumque suscipit esse obcaecati, consequatur nesciunt adipisci error veritatis vitae ullam ex temporibus. Nisi molestiae cupiditate asperiores impedit perferendis repellat quo dolorum cum rerum consectetur, ipsam, commodi?

Quo alias dolores reprehenderit iste quisquam nemo dignissimos doloribus, nobis quidem dolorum voluptates, numquam minima eligendi eveniet facere quis? Porro labore, ratione accusamus officia consectetur. Earum possimus reiciendis porro libero.

Officiis rem, aliquid ipsa non maiores enim, illo repellat, culpa facere architecto labore! Nostrum ducimus corporis et, numquam facilis explicabo, nobis, recusandae sequi nemo odit eligendi neque doloribus laborum inventore?

Asperiores eaque maiores dolor perspiciatis magni officia iusto velit soluta harum aliquid nemo facere voluptatibus, nulla quam porro enim, labore blanditiis perferendis eius aut sed sint ipsam accusantium! Optio, harum.

Ducimus maxime quia neque quisquam modi rerum aliquid dignissimos, voluptatibus pariatur, ut perspiciatis repellendus id porro possimus accusamus quod, impedit vitae nam excepturi! Corrupti dolor aliquid esse voluptatem, aspernatur quidem.

Soluta ea amet id quas tempore, praesentium expedita porro quibusdam vero provident cum voluptate incidunt quam consequuntur perspiciatis ex saepe, tempora quo asperiores aliquam ab beatae autem obcaecati molestiae eveniet.

Deleniti obcaecati, praesentium non ad, doloribus velit eos quam ducimus temporibus perferendis porro laboriosam consequatur ullam fuga esse architecto sed totam, ex vero similique expedita iusto quod nesciunt harum. Reiciendis.

Ratione quidem amet excepturi nemo expedita magni rem numquam velit quaerat asperiores ut nihil quo facere reiciendis, esse laboriosam consequatur deserunt nam, at praesentium doloremque officiis minima. Obcaecati culpa, placeat.

<VIDEO />

<!-- replace this code -->
<video controls>
    <source data-oll-src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source data-oll-src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
    <source data-oll-src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>

<!-- with this -->
<video class="oll" controls>
    <source data-oll-src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source data-oll-src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
    <source data-oll-src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>
<noscript>
    <video controls>
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
    </video>
</noscript>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab error, nesciunt sit repellendus accusamus natus officiis consequuntur tenetur dolores aspernatur! Vel ipsum sequi est, accusantium accusamus neque porro, facilis quod!

Sit sed perferendis quos quaerat, similique inventore nulla porro officia expedita, corporis numquam nihil quasi. Est molestias fugiat, ab pariatur veniam officia. Possimus repellendus, perferendis accusamus, porro quidem temporibus facilis.

Esse quis soluta eveniet perferendis dicta sed explicabo excepturi voluptatem non sit expedita, debitis quos ea repellat similique vitae dolorem est, amet laboriosam nam illum doloribus fugiat. Obcaecati, repellendus. Officia!

Sunt labore officiis ea, similique repellat est culpa vero et unde excepturi suscipit architecto perferendis doloribus, inventore iusto soluta expedita harum, sint laboriosam iure fugiat dolore incidunt quia. Debitis, error.

Illum adipisci atque deserunt minima ea iste aspernatur ab, facere, culpa sapiente ratione in harum. At, odit eius sapiente earum esse nostrum temporibus minima vel iure, praesentium dolorem! Consequuntur, saepe!

Nesciunt ipsa ipsum et dignissimos at, sit fugiat voluptas veritatis eum molestiae accusamus, magnam facere officiis. Officiis numquam veritatis obcaecati quaerat quam aspernatur optio vero neque, laboriosam, voluptatibus similique quas.

At quae cupiditate, neque, cumque necessitatibus, delectus vitae hic mollitia autem beatae a ipsa, sed nam. Accusantium vero voluptatum illum beatae laboriosam, earum impedit error consectetur veniam expedita nisi voluptates!

Dolor accusamus culpa aspernatur libero saepe, alias doloremque similique obcaecati omnis, illum voluptas. Perferendis doloribus sunt laudantium aspernatur. Amet aut culpa nostrum ipsum optio blanditiis voluptas dolores facilis eum facere!

Quo voluptatibus laudantium debitis assumenda sunt fuga odio dolores eos eveniet blanditiis ex totam non voluptate autem sit necessitatibus optio, sapiente numquam aliquam amet dolorem quibusdam. Voluptas optio quasi, quas.

Fugiat provident officia non reprehenderit sed, quidem enim blanditiis quam explicabo, amet libero eius. Voluptas explicabo ipsam dolore, illo repudiandae, facilis laudantium aperiam ex numquam, nisi amet rem eligendi natus.

CSS background-image

<!-- replace this code -->
<div style="height: 320px; background: center / cover no-repeat url(https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg) #000;"></div>

<!-- with this -->
<div class="oll-css" style="height: 320px; background: center / cover no-repeat url(https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg) #000;"></div>

Lorem Ipsum is simply dummy text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus neque ullam facilis nemo sint, animi voluptatum. Ipsam commodi, voluptatum nesciunt debitis expedita aperiam odit aliquid officia beatae nam, impedit voluptatem.

Autem repellat facilis voluptas nihil aspernatur ullam, a similique libero vitae deleniti eos temporibus quaerat quidem ut inventore error nisi illo perspiciatis aperiam dolorem accusamus tenetur unde eveniet. Impedit, assumenda!

Autem repellat laboriosam architecto voluptate sapiente cumque officia ipsum quas enim odit at, tenetur, eligendi neque. Tempora iusto mollitia qui, laborum dolor animi nihil dolorem explicabo veniam, quis laboriosam cupiditate.

Harum repellendus sint vel quae expedita sunt quia autem iste cum aspernatur ab quaerat animi reiciendis deleniti porro fugit magnam deserunt, necessitatibus. Quos repellendus sit asperiores ipsum veniam, voluptas fugiat.

Aliquid voluptates iusto provident esse aliquam unde molestias tempore cupiditate. Dolorem quisquam earum explicabo alias, natus numquam distinctio rem adipisci! Repellat voluptate unde labore earum animi illum quam, voluptatibus ipsa.

Deleniti, inventore facere sint! Adipisci totam ut, quidem reprehenderit dolore, suscipit natus saepe distinctio nesciunt sint modi non culpa tempora eligendi voluptatum quasi. Fugiat repudiandae laudantium deleniti distinctio sed numquam.

Doloremque magni officiis mollitia aspernatur! Cum voluptas itaque officia nemo unde aperiam tenetur, eos, voluptatem distinctio soluta praesentium odio. Iure sapiente sed recusandae rem inventore. Possimus rerum officia aliquam, amet.

Reiciendis fugit velit temporibus culpa optio, nesciunt aspernatur quae. Totam, velit inventore facilis nobis quod, impedit laboriosam recusandae ad at, qui dolorum nemo harum labore fugit deleniti tenetur eum illo.

Nemo obcaecati minima voluptas eos, debitis aspernatur iusto saepe! Repudiandae quos repellendus alias aliquam ab illum facere assumenda odio modi inventore nostrum hic, ut maiores fugiat beatae temporibus, quae quo.

Quis dolore error, suscipit magni illum maiores eum ipsa, consequatur minus atque ad doloribus blanditiis, repudiandae soluta necessitatibus, at modi. Molestiae illum veritatis, distinctio autem illo! Necessitatibus itaque ex, nisi.

Expedita, deserunt id modi quidem dolorum molestias atque, qui corporis itaque doloremque totam maxime numquam dicta fugiat reiciendis nostrum magni blanditiis iste vero est? Harum eius, omnis soluta voluptate sit?

Iste libero ipsum magni ipsam repudiandae pariatur. Provident excepturi quod deserunt, eos velit modi, voluptatum laborum quam mollitia perferendis voluptates reiciendis corrupti hic suscipit nihil, iure sint, possimus! Itaque, voluptatum?

Aspernatur atque facilis, earum. Voluptas eveniet repudiandae animi, nisi rerum placeat odit nam quas eos nostrum blanditiis magnam quae commodi aliquid excepturi voluptate quia iure ullam et soluta saepe? Explicabo!

Tenetur id laborum quibusdam, dicta incidunt blanditiis molestias reiciendis quidem explicabo, nam ipsa non possimus. Vitae quas incidunt odio, tenetur veniam beatae quibusdam corporis qui non, molestias architecto molestiae dolor.

Deleniti explicabo, autem maiores. Ex expedita, voluptatem voluptatum! Explicabo pariatur in quod tempora veniam sequi itaque iure corrupti illum quasi cum, ex esse natus assumenda fugit odit fugiat dolorem similique.

Voluptatem voluptates deleniti asperiores iure maiores reprehenderit impedit voluptas consectetur commodi, molestias quo quisquam cum doloribus totam minima laborum, delectus tempora odio, aliquam amet, repudiandae at pariatur necessitatibus. Molestias, earum?

Aut, impedit deserunt quidem blanditiis animi veritatis velit labore corporis vel ratione ab obcaecati. Numquam omnis culpa nulla, nihil voluptates, quae excepturi libero unde hic, sunt corporis illo eaque, sit.

Vero possimus et blanditiis maiores molestias incidunt repellat alias sequi doloribus quo dolorem iste sapiente consequuntur unde, laborum magnam laudantium ipsum, debitis? Quisquam asperiores maiores commodi voluptatibus beatae cumque aut!

Nostrum voluptates, dolore cum blanditiis quo officiis voluptate laborum expedita reiciendis delectus rerum, a tempore quia est. Nihil laborum, animi nemo architecto repudiandae itaque vel hic, qui nam quisquam delectus.

Cupiditate, quas facere dicta. Unde explicabo sint quibusdam at, quos maxime blanditiis possimus suscipit, incidunt totam sunt, libero quae neque? Repudiandae qui, dolore hic numquam adipisci accusantium in ipsum dolorum!