PROWAREtech
JavaScript: Lazy Load Images
Lazy load images; also works to know if an element has scrolled into view.
Because images hog resources, loading them as/if they are scrolled into view is useful. See also: Determine the position of an element.
Most of the magic happens in isScrolledIntoView(). This function determines if an object is visible on the screen.
This example loads images as they are scrolled into view. It could also be used to load text as the user scrolls down the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lazy Load Images</title>
<style>
img {
max-width: 100%;
width: 100%;
height: auto;
}
p {
max-width: 500px;
}
</style>
<script type="text/javascript">
function windowHeight() {
if(window.innerHeight) {
return window.innerHeight;
}
else {
if (document.documentElement.clientHeight == 0) {
return document.body.clientHeight;
}
else {
return document.documentElement.clientHeight;
}
}
}
function isScrolledIntoView(obj) {
return (obj.getBoundingClientRect().top <= windowHeight());
}
var imgs = document.getElementsByTagName("img");
function loadImages() {
for(var i = 0; i < imgs.length; i++) {
if (imgs[i].getAttribute("altsrc") !== null) {
if (isScrolledIntoView(imgs[i])) {
imgs[i].src = imgs[i].getAttribute("altsrc");
imgs[i].removeAttribute("altsrc");
}
}
}
}
window.onresize = function () {
loadImages();
};
window.onscroll = function () {
loadImages();
};
window.onload = function () {
loadImages();
};
</script>
</head>
<body>
<h1>Lazy Load Images</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere officiis illo mollitia, inventore quasi exercitationem placeat modi ex, voluptatem dolorem eligendi facilis perferendis nobis iusto! Adipisci temporibus porro dolore voluptate accusantium impedit? Dolorem molestias at amet recusandae quaerat, libero fugit enim magni architecto maiores. Aperiam similique quam ea dignissimos odio impedit deleniti ratione obcaecati id reprehenderit! Aliquam doloremque facilis, reprehenderit quae et beatae eius blanditiis, rerum eum consequuntur excepturi qui, omnis alias? Doloribus consequatur nulla ex quasi officiis! Voluptatibus eos sunt labore, accusantium totam sequi alias distinctio perspiciatis dolor quidem molestiae dolores sed reiciendis veniam molestias pariatur culpa odio!</p>
<p>Tempore facere totam eligendi laboriosam nisi illo quasi. Optio placeat rem est consequuntur, quibusdam enim, culpa incidunt totam quidem impedit, eum repellat aliquid vitae libero. Incidunt perspiciatis nulla animi et iste ipsam, quam dolorum, esse perferendis asperiores ab sed, minima aliquam totam architecto officia quisquam commodi pariatur libero? Illum, ab libero aliquam neque repellat qui blanditiis aspernatur, porro ducimus eligendi, culpa hic sint impedit necessitatibus. Mollitia exercitationem fugiat veritatis quisquam odit expedita omnis libero quis neque provident. At velit provident eveniet soluta voluptatum, modi excepturi nemo possimus iste nihil ea animi mollitia temporibus sit laborum. Accusamus illo autem fuga nobis!</p>
<p>Libero sapiente minima voluptates aut tempora alias totam quo maiores assumenda mollitia quibusdam, quas illo ratione neque error aliquid ipsum et tempore, nulla dignissimos voluptate nobis natus. Sunt non suscipit sit ipsa, exercitationem illo. Aperiam accusamus, voluptatum beatae harum quos veniam tempore voluptatibus asperiores nam deleniti quia consequuntur rem adipisci perferendis assumenda qui iure nesciunt doloremque dolorum quaerat impedit sunt. Cum asperiores ducimus et obcaecati deserunt, sed in perferendis porro sapiente eveniet magni neque dolor? Quibusdam saepe culpa nihil iure velit vero, sint quasi similique at, beatae reiciendis. Iste debitis maxime incidunt nihil aspernatur minus dolorum iure cupiditate provident fugit.</p>
<p>Tenetur reiciendis dolore, velit in iusto dignissimos dicta minus molestiae, facilis architecto aliquam assumenda deleniti praesentium perferendis nisi, necessitatibus incidunt? Perspiciatis nesciunt natus incidunt debitis! Totam natus perferendis at dolorem. Numquam ad, quidem necessitatibus cumque quas qui error doloribus! Recusandae nemo harum aliquam mollitia hic, eaque ab, distinctio totam, delectus commodi perferendis id excepturi? Libero atque quibusdam unde quia necessitatibus, quisquam a porro. Consectetur esse beatae, maxime asperiores debitis id sequi quod, odio a perferendis at iure. Quae quidem, laudantium quaerat quas ipsa nobis consequuntur itaque dolore iusto hic debitis officiis officia veritatis cumque eos optio necessitatibus natus ex suscipit.</p>
<p>Nemo aliquid neque qui repellat exercitationem itaque corporis enim ex voluptatem vel nostrum accusantium ut perspiciatis praesentium quos, incidunt consectetur repellendus a nesciunt. Saepe sint odio et, beatae, quibusdam esse facere explicabo placeat provident itaque incidunt, reiciendis dicta error facilis magni quia aliquam quos commodi ad aperiam. Deleniti veniam provident vitae culpa eligendi quasi laudantium inventore, natus saepe voluptas ea aliquid! A veniam modi enim aliquam, minus ipsa in sed ad saepe quos perferendis voluptas nulla sapiente officiis eius blanditiis magnam temporibus possimus sint obcaecati quidem? Quam nisi eveniet sed fuga, at qui placeat quos, exercitationem ullam quis totam sit!</p>
<p>Sunt amet quaerat obcaecati non itaque maxime architecto exercitationem accusamus. Nesciunt tempora odit sapiente culpa, magnam vel repudiandae necessitatibus, sed quaerat provident molestiae officia asperiores delectus esse obcaecati maxime quidem. Numquam, maiores dolorem quibusdam doloremque autem sapiente qui cupiditate! Numquam dolorum ipsum, molestiae maiores minus suscipit deleniti enim facilis aliquam voluptatum unde libero nihil, commodi harum odit eos? Nostrum voluptatem autem natus veniam dicta officia necessitatibus voluptatibus asperiores nesciunt accusamus tenetur, ut dolores aut provident minus quasi quae velit cum aspernatur, similique repudiandae. Adipisci temporibus unde, quis tempore dignissimos odit ea, architecto, cupiditate rerum laboriosam perferendis minus numquam rem dolore.</p>
<p>Harum ea aperiam aliquam doloribus omnis neque, possimus qui dolores illum facilis, rerum ad cupiditate impedit ipsum. Non, itaque eum. Ipsam placeat, dolorem molestias obcaecati aliquam vero ullam nisi porro veniam architecto et, reprehenderit vitae explicabo sint sequi, provident doloremque earum non. Est blanditiis sit necessitatibus placeat quod neque? Magnam ullam dolor molestias itaque ex architecto sunt pariatur, vero provident quos! Nulla eveniet modi reprehenderit recusandae vel aliquid animi voluptatem, in delectus provident distinctio repellat illo veritatis ut maiores, vero voluptate iusto quo? Consectetur, excepturi quasi quidem ea porro veniam accusantium minima omnis? A earum perferendis adipisci unde itaque maiores!</p>
<p>Ratione dolorem itaque sunt cum voluptatibus quo totam neque temporibus, ducimus officia non laboriosam eum commodi saepe voluptatem aperiam libero. Voluptates adipisci quas eos? Repudiandae, laudantium deleniti eaque vitae veniam harum voluptatum hic voluptatibus expedita vero nostrum! Facilis neque quae veritatis explicabo reiciendis beatae reprehenderit ipsa necessitatibus, dolorum blanditiis aperiam provident non totam tempore, officia eveniet nam quaerat inventore? Voluptatum omnis ea iste, quas fugit incidunt, perferendis quasi eligendi voluptas quos expedita ipsa enim culpa hic commodi officia praesentium quibusdam illo. Voluptas alias nam nihil dolorum quidem accusantium? Aut dolores, vitae dolorum odit amet inventore. Quisquam nostrum accusantium voluptatem quam.</p>
<p>Illo animi modi hic, quos libero eum a dolorem nihil optio magnam maxime atque, rerum necessitatibus, at provident id vero voluptatem deleniti fuga adipisci! Nisi perferendis pariatur dolore dolorum! Nostrum adipisci iste magni molestias labore voluptates nulla ipsam! Facilis laudantium sint, illo ex minus dolore suscipit recusandae deserunt earum incidunt ducimus nobis! Debitis temporibus ex nam quidem dolore voluptates amet blanditiis asperiores molestias a fuga, dignissimos, fugit cumque repellendus minus. Tempora vel provident fuga animi culpa doloribus velit autem et cumque, at eius quibusdam dolorem asperiores, repellendus ipsam. Ipsam eligendi repellendus, soluta libero culpa pariatur alias porro necessitatibus cum dolores.</p>
<p>Accusantium, cupiditate sunt ab in eligendi exercitationem optio libero sit ipsam expedita iusto! Aliquid aperiam veniam molestiae beatae ducimus perspiciatis consectetur corrupti rem exercitationem error maiores eum quis laborum eos sequi iste, vero alias, adipisci voluptates sed recusandae dolor magni quaerat. Quos tempora quae ullam sunt quisquam quam. Quis dolorum rerum, expedita sed iste, eum deserunt temporibus unde earum officiis debitis natus! Id, assumenda! Aliquam exercitationem assumenda ea voluptas tempore nemo eius non eveniet obcaecati ipsam perferendis eaque dicta nisi quos doloribus optio, architecto et officia facilis expedita. Fugit quidem odit officia deserunt tempora praesentium perspiciatis est! Odio, quod culpa.</p>
<p>Magnam possimus nihil expedita autem minus? Alias, ut veniam. Illo quidem tenetur hic dignissimos fuga minus quasi magni deserunt veniam. Reiciendis, harum eaque? Obcaecati incidunt enim rerum culpa, ducimus ipsa quisquam maiores molestiae reiciendis molestias, quibusdam blanditiis animi. Quidem pariatur, earum, iste impedit rerum eligendi tenetur perferendis aut odio accusamus quas, mollitia maiores veniam atque harum illo? Assumenda est delectus eum molestiae id facere perspiciatis pariatur libero tenetur, ipsum, quasi cumque repellat incidunt consectetur fugiat? Molestias, deserunt rerum? Harum odio cupiditate assumenda quos aperiam optio in dicta quod, qui nesciunt, eligendi nam atque, quia quam vero pariatur soluta. Natus, a?</p>
<p>Totam quaerat corrupti delectus repellat eos quasi, temporibus tenetur sed minima sapiente architecto error et. Sequi doloremque quo accusantium molestias at error repudiandae. Ipsam itaque dicta at expedita facilis, praesentium dolorem amet odio minus similique possimus earum neque, autem, cupiditate nam quasi maiores fugiat. Quibusdam, expedita necessitatibus? Blanditiis porro cumque perferendis in aliquid eaque sapiente rerum dolore, alias, excepturi esse quo harum est voluptatum nostrum? Voluptate dolorum asperiores blanditiis a minus distinctio qui repellat, praesentium iure voluptatem nisi aliquid fugiat placeat perspiciatis illo voluptates non porro doloremque veniam eveniet quae temporibus. Porro laborum iure eius atque placeat! Nisi, alias dolor.</p>
<p>Voluptatum repellendus iure sunt est! Quidem debitis quia iste id dolore minus deserunt, asperiores illo nisi cumque necessitatibus ipsum vero eum eveniet rem voluptatum soluta ducimus non magnam aspernatur optio excepturi. Ab vitae culpa fugiat! Cum quibusdam harum error ab culpa, facere rem hic corrupti fugit unde at veritatis rerum voluptatem, aspernatur nisi ipsum atque ratione exercitationem consequatur quisquam nostrum voluptatum id incidunt. Soluta exercitationem totam culpa deleniti, consequatur minus esse. Mollitia cupiditate amet ad error quis ex, officiis odio voluptate aperiam atque id sed at quaerat, iste, deleniti quae veniam ipsa. Ex repellat porro, quisquam autem voluptates distinctio error.</p>
<p>Quos, illo aspernatur voluptas nemo nostrum ex, libero praesentium dolorum magni ratione, pariatur maxime? Atque ipsum iste qui necessitatibus aliquid, provident libero? Aspernatur, eveniet! Harum libero quo totam culpa quos quidem quaerat in modi saepe? Nulla atque cupiditate fugiat facere. Perspiciatis maiores ab voluptates nam fugiat saepe error, maxime animi velit atque, architecto quis numquam facilis quidem cumque magnam autem odit id consequuntur, eveniet eius amet delectus natus. Neque enim repudiandae voluptas excepturi. Magni autem magnam libero maxime fugiat! Excepturi veritatis ex nostrum nulla esse necessitatibus nihil nesciunt, recusandae voluptates rerum ea veniam nobis reiciendis consequatur sint magni deserunt quaerat.</p>
<p>Illum minus accusantium enim consectetur laborum, quidem ipsum doloribus eos expedita aperiam nemo ducimus in, debitis commodi accusamus velit fugit quae quam, ad assumenda placeat explicabo. Cum voluptatibus aliquam rem a officia nesciunt, dolore similique in cupiditate animi ipsa minus quo maxime odio quis porro ullam fuga id culpa omnis itaque asperiores. Repellat iusto corporis eligendi, vero impedit rem cumque architecto minus voluptatibus qui molestiae tempora, fugit aliquam! Libero voluptate officiis, obcaecati, aut atque eos repellendus animi voluptates sunt commodi natus molestiae minus sapiente repudiandae quibusdam! Nobis impedit ab nisi eos exercitationem molestiae, ipsum quas modi a recusandae nulla iusto!</p>
<p>Laboriosam magni omnis recusandae accusamus fuga reiciendis neque enim, modi placeat ex, hic quidem! Quisquam omnis ad repellat! Eligendi nisi debitis tenetur mollitia nobis, fugiat atque voluptates nostrum vero optio provident commodi eaque, sed blanditiis cum pariatur voluptatem, quis autem placeat saepe amet qui dolorem eveniet? Dicta, laudantium quia possimus accusantium magni autem voluptatem quidem unde, qui, reprehenderit expedita quisquam eveniet alias ratione maiores laboriosam adipisci dolores commodi sapiente ullam harum fugit. Nostrum corporis porro deleniti nihil commodi maxime velit esse ea mollitia necessitatibus aliquid incidunt, iste quaerat cupiditate odio nisi eius vitae provident natus quasi illum alias est architecto?</p>
<p>In cumque assumenda eos quos, ullam consequatur, beatae sapiente enim nobis ut iste vel maxime, quia amet atque ipsum iure doloribus tempora id exercitationem animi. Deleniti, veritatis labore! Saepe nobis sequi, possimus a inventore rerum cumque assumenda maiores adipisci fugiat, eius sunt quod odit explicabo accusamus veritatis optio. Voluptas a aut illum fugit aliquid voluptatem fugiat mollitia natus ab. Assumenda at dicta impedit labore saepe, officiis enim nostrum inventore aliquam praesentium amet, sunt optio perspiciatis sed sapiente asperiores laudantium minus adipisci ex. Enim, in, magni accusamus natus maxime adipisci saepe inventore quisquam, nemo illum doloribus dolorum vel impedit distinctio quis.</p>
<p>Adipisci eaque omnis blanditiis, atque recusandae voluptatum assumenda non quod. Ad modi, consequuntur suscipit libero quisquam explicabo ea corporis, inventore cum tempore eaque tenetur. Sit dicta recusandae magni ducimus quo necessitatibus quod ad. Fuga ratione praesentium alias nisi sit libero omnis voluptatem ipsam sequi id modi, ad laboriosam exercitationem nobis saepe doloremque explicabo esse distinctio vero fugiat, at consequuntur maxime recusandae. Fugit dicta obcaecati impedit inventore fuga quidem! Ab magnam reiciendis quam tenetur quas exercitationem nihil, ut modi dicta incidunt quis ratione nostrum recusandae eius ipsa maxime deleniti, quibusdam cum excepturi repellat nobis ipsum saepe? Exercitationem explicabo voluptatem voluptas qui?</p>
<p>Illum quidem eaque possimus molestiae odit saepe quam iure aut officia accusantium nam ab, cumque maiores expedita modi quibusdam. Perspiciatis id doloremque illum! Sed ad ratione accusantium eius? Minus, esse beatae deleniti rem quis dolores, debitis optio, facere soluta nobis assumenda! Eaque beatae fugit neque praesentium dolores, hic recusandae, officia reprehenderit, officiis ad obcaecati ipsa sed nemo fuga est vitae possimus quod expedita maiores temporibus aut quae porro nihil. Ipsa ad nostrum esse architecto tempora provident sit aperiam fuga, neque, et nisi nihil voluptatum iusto aspernatur cum. Consectetur alias amet veniam, voluptatibus sint culpa, magni corporis, quam necessitatibus unde cumque.</p>
<p>Iste, repellat? Ipsum, commodi accusamus nemo quod laboriosam minima ut doloribus officiis quidem cupiditate repellendus magni porro vitae possimus, eveniet esse deleniti numquam veniam? Et blanditiis fugiat tenetur culpa repudiandae, nobis corporis saepe cum hic fugit rem maiores optio temporibus earum, cupiditate ducimus accusamus quos distinctio iusto dolores at voluptatibus, facilis minus! Quaerat, quidem repellat! Perferendis ut veniam quasi recusandae molestias itaque a, ab iste saepe alias esse minus quae quas voluptatibus voluptates provident doloremque voluptatum incidunt odit voluptas aspernatur? Itaque ex error maxime facere veritatis, quidem laudantium ipsa ut consequuntur dolorem recusandae optio aliquid expedita minima quo voluptate repellat.</p>
<p>Ut, cum nobis! Sed cumque, dolorum odit quasi mollitia facilis nostrum dicta! Voluptate optio autem omnis nisi. Laudantium culpa totam modi voluptatem esse fugiat similique dolorum eum rem earum optio sapiente accusamus, consequuntur maiores amet porro incidunt nam est soluta dolor distinctio odio officiis provident! Obcaecati, placeat veniam illum reiciendis modi quasi quae mollitia officia fugit commodi natus harum atque aperiam facere dignissimos quo quis saepe unde tempore hic et, quod neque odit. Vel tempore animi magnam veniam. Ipsa, asperiores accusantium doloremque modi provident ab esse officia est. Illum aspernatur eos numquam illo expedita minima possimus excepturi deleniti reiciendis ut.</p>
<p>Explicabo doloribus omnis qui? Labore omnis aliquam fuga minima illum nobis laborum rerum esse asperiores harum sapiente optio sequi ex temporibus non, explicabo numquam possimus nostrum veniam odio minus aliquid voluptatum error pariatur. Perspiciatis nobis ullam sint molestiae illum quibusdam? Nisi repellat nulla nesciunt placeat eaque et sit beatae, tempore voluptatem atque cumque. Quo nulla obcaecati vero quasi doloremque rerum recusandae enim sunt repellendus, quia dolor officiis sequi aut quisquam, ea reprehenderit numquam ipsa nostrum temporibus. Beatae magnam aspernatur eius ad possimus ducimus ipsam natus expedita voluptatem ratione praesentium fugiat odit est consequatur, dignissimos libero nobis amet rem ipsum. Aut.</p>
<p>Aut neque sunt provident enim laudantium culpa? Eum repudiandae quia nesciunt quae esse neque tenetur mollitia repellendus illo doloribus! Deleniti tempore, explicabo, rerum iure omnis doloremque mollitia magni excepturi animi sed minima vitae maxime impedit? Ea animi harum aperiam cumque. Natus itaque reiciendis eius est nihil beatae quaerat culpa deserunt cum aperiam! Similique delectus adipisci quia modi tempora in suscipit officia blanditiis id nostrum quasi libero, deserunt maxime unde aliquam totam earum eaque harum voluptatum, nesciunt facere cumque impedit esse quis. Maiores deleniti consequatur mollitia dignissimos perspiciatis illo ipsum ut, numquam rem earum pariatur tempora quibusdam sapiente laudantium eius modi?</p>
<p>Ullam quibusdam illo fuga, ratione est iste vitae expedita, perspiciatis molestias eos reprehenderit quaerat nulla incidunt ipsam autem! Sed labore deserunt accusamus asperiores debitis repellendus culpa atque cum dolorum minima eveniet qui ullam aperiam tenetur, dolorem aliquid eos ex odit sunt doloremque in porro quasi. Officia praesentium doloremque distinctio dolorem fugit nam beatae dolore corrupti esse blanditiis magnam id repellat ab illo, error exercitationem eveniet quia rem earum incidunt cumque et ea? Sed repudiandae illo deleniti distinctio omnis. Veniam, suscipit voluptatibus quae commodi rem quibusdam assumenda accusantium dolor, praesentium, ut illo. Iure dolorem unde, corporis autem ipsa quisquam voluptas deserunt!</p>
<p>Officiis molestias eum nesciunt ullam necessitatibus non cupiditate delectus itaque officia odio, voluptates labore nisi explicabo recusandae eius saepe quae, vero, rerum quisquam ducimus! Mollitia est repudiandae odio ipsam maiores voluptate quasi atque voluptatibus fugit quidem ex quia maxime eveniet veritatis aspernatur eos ad expedita, quas aperiam nobis natus, nihil at sequi. Veritatis odio doloremque at. Quam quos neque in ex quisquam sed eligendi. Quia, officia laborum eveniet quam, necessitatibus harum, vel delectus doloribus quis eaque vero minima aperiam! Odio eius qui ratione vitae veritatis assumenda modi impedit! Consequuntur vel illo ullam, quas voluptas eius cumque autem doloribus optio est?</p>
<p>Sit deserunt, assumenda porro eveniet accusamus beatae deleniti voluptatibus aliquam. Aspernatur facere delectus, dolorem deserunt, optio quis, autem explicabo saepe quo molestiae rerum corporis aut assumenda? Obcaecati eaque dicta sit, quae nostrum quasi eligendi facilis perspiciatis et omnis officiis corrupti. Consequuntur eligendi magnam repellat facilis, nulla atque esse ut voluptas aliquam asperiores accusantium. Facilis, perspiciatis quisquam. Cum, dolorem. Quos id doloribus labore ipsa enim voluptatum sapiente quam esse quod, in possimus atque unde incidunt. Saepe obcaecati explicabo nesciunt ea distinctio nostrum eveniet et, quia provident tempora consectetur rerum similique in alias ad doloremque suscipit incidunt excepturi ex, animi a at.</p>
<p>Fugit officia assumenda vitae asperiores quis vero deserunt earum! Corrupti, nihil corporis. Amet in assumenda pariatur esse a alias, fugiat odit? Dolores sed, atque, consequatur ad at iste culpa ea et expedita eaque libero facilis doloribus alias? Ab, minus culpa. Cupiditate optio voluptatum magni nemo velit at quibusdam, obcaecati reiciendis quod? Ex facilis quibusdam expedita itaque pariatur, animi consectetur accusamus, sed dolor magni laboriosam ut totam, minus repudiandae? Ex, nemo rerum dolore natus doloremque iure soluta facilis, fuga sint quo nostrum at porro? Incidunt iste, illum itaque aspernatur autem maiores voluptatem hic. Fuga dolore rem atque corrupti delectus eaque magnam.</p>
<p>Eveniet ipsa illo at ab ex in iste magnam obcaecati explicabo modi dignissimos, laboriosam velit inventore iure cum natus necessitatibus sit veniam voluptates neque laborum voluptas sunt autem? Omnis, illum magnam. Dolorum eligendi quasi, quod, quas error recusandae dolore fuga consequatur dolorem laborum eius, placeat laboriosam obcaecati. Nulla autem aliquam, veniam alias facere animi impedit tenetur libero sint obcaecati id expedita optio ipsum suscipit neque magnam cupiditate perspiciatis aut quam est aperiam natus officia doloremque. Repellat sed possimus commodi voluptas, sunt ex quia ipsum fugit quo ducimus sit perspiciatis architecto voluptatibus dolore magni facere rerum distinctio similique rem, nihil praesentium?</p>
<p>Cupiditate, deleniti est dolorem facere iusto id ipsam provident nam sequi illum expedita ducimus omnis fuga sapiente, dicta nostrum vel tempore similique modi perferendis quidem eius. Ipsum, enim autem. Fugiat aliquid nobis consequatur? Saepe est suscipit, nam rerum quas nulla, quod architecto omnis harum dolores voluptates atque praesentium quam sequi quidem sit placeat aperiam veritatis voluptas rem veniam magnam. Dolor, eaque autem itaque suscipit eum modi. Veniam quisquam iusto ut minima optio magnam amet nam similique, doloribus voluptas et maiores, repellendus molestiae illo inventore dolorum odio veritatis quo blanditiis. Laudantium dolor perspiciatis, sequi esse eum nemo id nam ipsum atque!</p>
<p>Commodi tenetur quisquam at, temporibus, reiciendis in alias obcaecati pariatur, necessitatibus velit minus cupiditate. Accusantium voluptas aut quo tenetur ut libero assumenda hic at labore? Sit explicabo vitae natus culpa ipsum tenetur rem velit libero delectus fugiat magnam eveniet, officiis laborum harum, nisi debitis soluta sapiente! Iure odit nam enim. Beatae quisquam et facilis, ullam autem ratione neque voluptate sequi placeat fugiat, non quod minus tempore optio, magnam blanditiis fuga soluta dignissimos laborum. Qui cumque accusantium eveniet laborum, explicabo enim ipsum voluptates odio recusandae hic excepturi harum placeat assumenda quos, debitis accusamus impedit in. Non, officia unde. Aliquam, nisi molestiae.</p>
<p>Consequatur quos, cum recusandae hic harum dignissimos voluptatum nisi assumenda voluptas fuga quae incidunt culpa nam fugiat nihil distinctio maxime ut fugit excepturi eum pariatur. Corporis quisquam harum esse repellat laboriosam mollitia beatae doloribus maxime facere. Dolorum eos nesciunt eum asperiores dolore repellendus magnam itaque. Quidem quam repudiandae eaque ad ipsum impedit aliquid culpa tenetur mollitia dolorem esse, corporis nobis rem molestias delectus ipsam, ex voluptate consequatur! Vero cupiditate amet magni dolor molestiae cum aliquid aut, sapiente, dolorum ducimus reprehenderit voluptatum quis praesentium dignissimos? Ducimus iusto architecto, dolore et necessitatibus nulla sunt quae iure reprehenderit ratione alias blanditiis deleniti natus.</p>
<p>Fugiat quis possimus, laborum, beatae voluptatum, vel aut dicta laboriosam pariatur blanditiis non omnis doloribus dolorem fugit repellendus totam assumenda! Nihil debitis reiciendis, obcaecati eveniet tempore odit dolorum, reprehenderit corporis placeat libero vitae sed? Nobis ad, velit veniam aliquam et voluptatum sunt aspernatur est, deserunt maxime dolorem sint hic veritatis ut accusantium ea tempore voluptate. Excepturi maxime quaerat possimus autem tenetur placeat et laudantium vero perspiciatis totam, ut fuga harum sit cumque dignissimos unde. Autem, provident. Iure eos impedit, dignissimos iusto exercitationem fuga laborum? Molestias maiores atque deserunt amet, necessitatibus rem illum odit dolorum qui nemo, quas incidunt adipisci doloremque?</p>
<p>Rem deleniti corrupti, labore ipsam natus soluta culpa hic est quaerat, veniam atque earum aut animi accusamus facilis. Repellendus laborum inventore ipsa blanditiis accusamus, harum non labore nostrum adipisci illum odit perferendis laudantium numquam porro necessitatibus maxime error. Corporis nisi, laboriosam dolorum illo impedit temporibus at illum inventore nesciunt consectetur laudantium voluptates cupiditate provident repellendus magni mollitia! Consequatur delectus animi nam doloremque. Modi asperiores corrupti beatae fugiat recusandae blanditiis obcaecati amet expedita vero pariatur rem ducimus nesciunt sit illo, iusto impedit assumenda ad aut nisi! Consequatur, facilis iusto debitis architecto corporis tempora cupiditate nihil tempore, enim harum facere nobis excepturi?</p>
<p>Assumenda dolore porro maxime, corrupti quisquam eius? Molestias doloribus illum odio nam, laudantium optio dolorem a animi totam voluptatibus quisquam facere numquam recusandae ipsum ratione officiis culpa velit pariatur cumque reprehenderit ut quia rerum? Quo cumque tempore repudiandae recusandae rerum labore facilis itaque placeat velit magnam ad nulla, excepturi, accusantium ducimus deleniti autem quasi, possimus quas a vel laborum. Soluta explicabo dolor animi itaque autem inventore totam fuga, sed quibusdam earum! Quidem quam dolore dignissimos, eos explicabo laboriosam nemo a? Magnam eius, voluptates doloribus possimus eligendi dicta ab? Deserunt, in beatae! Commodi, architecto unde! Quisquam quaerat rerum laborum libero repudiandae.</p>
<p>Ad amet aspernatur accusantium, nihil ratione neque consequuntur perspiciatis voluptatem facilis praesentium esse itaque repellat ut molestiae mollitia vero sint similique facere. Est expedita voluptas qui nisi, possimus aliquam adipisci, enim dolore sint esse iste blanditiis voluptates rerum error inventore eligendi ex autem tenetur commodi veritatis in animi culpa eum nesciunt! Animi corrupti laboriosam tempora sequi eum impedit dolore quas tenetur itaque dolorum enim iure doloremque veritatis ullam odio, hic alias quam dolores? Exercitationem numquam architecto nihil? Voluptas magni provident illo aperiam. Molestias ipsum adipisci dolor dolore, ducimus dolorum iusto quia deleniti, quos aut commodi quam culpa ex nemo quo!</p>
<p>Minima necessitatibus illo ex tempora, aut officiis, dolorem molestiae atque quis doloribus assumenda qui rerum suscipit vitae, beatae expedita est. Hic soluta laudantium, sint dignissimos, magnam tenetur sequi quidem illum sunt ex iste porro aliquam in? Similique, assumenda impedit tempora, perferendis voluptatibus eos cumque ipsum fuga exercitationem expedita alias facere doloribus in ad consequuntur temporibus? Maiores, iste suscipit ratione veniam quae vel atque delectus quidem in dicta dolores nihil pariatur explicabo laudantium quos rerum blanditiis impedit tenetur doloribus eligendi obcaecati? Libero non, enim vero porro ipsam a tenetur modi saepe reprehenderit quia molestiae necessitatibus ipsa laborum obcaecati dolorum nam numquam?</p>
<p>Cupiditate, ullam soluta pariatur quo consequatur officia non nemo eaque provident tempore vel, tempora accusantium rem molestias ea ipsum alias odio fugit expedita voluptas, quod labore et! Perferendis sapiente explicabo exercitationem quia tempore dicta, saepe sed sint quos soluta veniam odio! Eos nemo odio nobis quibusdam sunt id distinctio at, eius, consectetur quae amet magni, praesentium ducimus in alias voluptates officiis ratione ipsa beatae vitae eligendi soluta ex delectus earum. Facilis nulla sunt a voluptate blanditiis aut doloribus ut. Molestias facere velit at nulla, dolore amet ratione deserunt, temporibus porro suscipit magni illum tenetur excepturi corrupti, rem commodi repellat nobis!</p>
<p>Vitae corrupti explicabo alias quod! Corrupti autem atque ea sequi illum. Doloremque tempore est nulla expedita culpa. Odit accusantium repellendus laudantium qui nam voluptas voluptatem temporibus repellat corporis. Doloremque nesciunt non natus tenetur, illo numquam voluptatum obcaecati error sed soluta? Sequi recusandae provident blanditiis! Quas delectus, modi eum similique consectetur expedita aspernatur vitae sequi voluptatum et consequatur doloribus soluta, cumque quaerat illum? Illo, dignissimos nam qui doloribus explicabo vel hic a deleniti dolor facere eos ex sunt ab rem iure id! Laborum minima ipsa consequatur alias, quasi fugit eius error quos totam, autem sed, illum vitae voluptatibus unde quibusdam dolore.</p>
<p>Dolore doloribus illo natus commodi saepe explicabo. Eligendi ratione mollitia debitis voluptate iste quasi quae reiciendis voluptas alias corporis nostrum possimus expedita facilis rem repellendus quas aperiam, fuga quidem officiis consequatur atque? Aut commodi qui sint ratione atque, blanditiis fuga nobis tempora non, nisi, eaque consequuntur veniam neque. Enim voluptatibus quisquam porro, architecto quidem adipisci debitis aspernatur at possimus odio deleniti hic aperiam magnam labore consequatur vero quia, maiores dolorem minus ipsum unde amet. Earum optio esse voluptas eaque, neque ab aliquam, quasi nisi odit, eius nobis maiores? Voluptatem porro doloribus eum nam, nulla cumque veniam voluptates eius sunt reprehenderit!</p>
<p>Accusantium reiciendis in officiis eius porro voluptates adipisci fugit, architecto obcaecati possimus ex facere earum sed recusandae unde, fuga, omnis eum labore id quasi repudiandae quod corrupti. Eos numquam quia facilis et provident, eius debitis fugiat ut explicabo nihil officia rem harum eveniet possimus repudiandae alias, repellat culpa iure perspiciatis aspernatur sunt minus rerum ad! Eveniet ipsa ipsum ut velit possimus consectetur blanditiis ducimus libero veniam? Itaque, aliquid maiores! Modi veniam odit eaque tenetur omnis fugit repellat exercitationem dolorem esse, quia similique accusamus quos dignissimos fugiat? Magni ut excepturi laudantium deserunt id veritatis atque, consequuntur minus totam facilis ipsum molestiae.</p>
<p>Tenetur quam voluptatibus aliquam quas, sint molestiae itaque et eligendi accusamus corporis, velit sequi autem? Optio, dicta ipsum, praesentium nobis dolores natus repellat aliquam a asperiores delectus recusandae accusamus temporibus cumque, perspiciatis amet. Earum non amet ipsum eius cum quisquam, omnis voluptate ducimus dolorum numquam nam similique. Maiores, consectetur quae dolore quasi perspiciatis enim deleniti possimus vitae accusantium magnam sunt! Consequatur modi tempora quod error dicta odit, ipsa quaerat qui voluptatem, velit dolorem incidunt sint molestias. Odio libero expedita quibusdam, praesentium fugit nulla necessitatibus voluptates ad dolor excepturi asperiores est ipsa vitae? Repudiandae ratione, delectus blanditiis suscipit labore maxime cum.</p>
<p>Sed officiis impedit distinctio maxime eaque, quibusdam laboriosam! Culpa sapiente minus fuga nulla libero, facere accusamus quisquam eum quam ut architecto excepturi labore officia, dolor, dolores unde tenetur? Error libero mollitia sint unde consequatur ducimus atque magnam ipsum quae assumenda exercitationem nemo numquam vitae rerum nobis sequi dolore, ratione labore. Natus quia tenetur, magnam soluta odit eos. Ut voluptate quibusdam suscipit quidem vero delectus, vitae illum cum facere, alias culpa. Consectetur exercitationem qui sint. Veniam, voluptates neque omnis ullam voluptatem laborum. Accusamus quas enim esse eligendi facere, nihil labore neque voluptas quos laudantium nobis quod exercitationem perferendis, explicabo voluptatum saepe.</p>
<p>Unde aperiam doloremque, consectetur sed nostrum at aliquam illo assumenda maxime corporis consequuntur, quod necessitatibus accusamus. Odit cum molestias consectetur vitae eligendi asperiores? Iusto veritatis aut fugit consequuntur adipisci tempora vel nesciunt odit expedita, praesentium sed molestias vero quaerat, ex repudiandae! Reiciendis asperiores quos architecto delectus laudantium nihil hic tempora unde officiis nemo voluptatibus neque labore quam commodi, cum, optio vitae error! Voluptatibus perspiciatis excepturi repudiandae sapiente magni nihil magnam quidem ab explicabo dolorem autem iure assumenda nam tempore velit, commodi ipsum minima voluptatum cum ad illum, recusandae quisquam esse. Laboriosam quos modi, enim aliquid ullam numquam dolorem omnis ipsum!</p>
<p>Assumenda nostrum perferendis laboriosam labore voluptas est distinctio, ut aperiam beatae inventore atque voluptatum alias suscipit nemo enim corporis tempora quisquam cupiditate? Obcaecati vero quaerat, ex repellendus nostrum enim nesciunt nulla delectus quasi nihil recusandae perspiciatis voluptate sint quae, maiores provident voluptates? Illum tempora laudantium praesentium repellat nobis amet, impedit reiciendis dicta saepe numquam nemo ratione quia, qui recusandae molestiae minima corporis maiores esse aperiam odit! Eius non minus consectetur asperiores officiis alias sit est dolore. Repudiandae id suscipit vero aliquam culpa! Saepe molestiae autem eveniet dolore, repudiandae cupiditate fugiat nobis porro eius natus quisquam tempore corrupti perspiciatis, provident libero?</p>
<p>Quo adipisci perferendis molestias, sed minus minima consequuntur culpa quia voluptatibus repellat magni error atque aut numquam soluta commodi maxime dolorem doloremque. A nemo deleniti obcaecati quisquam unde cum fugit eaque perferendis quas blanditiis placeat, ducimus corrupti consequuntur facere, quam magni veritatis. Perspiciatis id autem itaque tenetur quia, deserunt perferendis vel aperiam sed, corrupti officiis! Quasi vero aperiam nisi quae ab accusamus fuga dignissimos temporibus veritatis ea? Facilis, beatae dicta magnam debitis deleniti ut aperiam, quisquam atque corrupti nihil optio cumque autem a magni exercitationem provident dolores minima praesentium reiciendis recusandae vero. Esse odio ipsum iure nesciunt nisi sit vel?</p>
<p>Odio, totam. Non sit, autem quibusdam facere neque voluptas nemo nam, ad animi eum nostrum, dignissimos repellendus debitis odio iure voluptatem. Quisquam saepe quae alias maiores dolorum tenetur dolor iusto culpa voluptatem rerum dolorem inventore laboriosam architecto, perferendis cupiditate enim distinctio esse ducimus fuga deserunt reprehenderit illum molestias quo. Unde, iusto, nemo error atque possimus libero odit vel quo numquam reiciendis placeat ab quidem veritatis, perferendis esse. Adipisci perferendis eaque suscipit voluptatibus aspernatur voluptates, numquam debitis sit in maxime illo! Qui, pariatur accusantium et sint adipisci nobis nihil cum fuga odio modi hic earum corrupti esse quos ratione ut dolore.</p>
<p>Recusandae quos hic quis qui ad iste maiores maxime et assumenda nihil atque culpa ea, odio laborum laudantium, fuga deserunt eius modi iure! Nemo quae numquam hic id nesciunt eius, repellat accusamus ex est eum, quam odio quibusdam officia adipisci fugit illum ducimus, molestiae veniam sed dolorum molestias explicabo eaque? Fugit sequi possimus dolor omnis magni quasi. Mollitia rerum, architecto voluptates esse necessitatibus fugit reprehenderit cum vel libero voluptas accusamus impedit ullam eligendi quasi velit. Eum, saepe temporibus ut reprehenderit quidem provident expedita vero quae libero voluptate nulla commodi explicabo at voluptatem labore delectus cum ratione assumenda? Culpa, sequi reprehenderit.</p>
<p>Iste, ad, reiciendis odit eaque saepe asperiores quo possimus porro, aperiam quasi quibusdam laudantium! Exercitationem, quidem architecto repellat aperiam unde nulla. Tempora excepturi, nisi nostrum aperiam reiciendis autem dicta debitis doloribus consequatur deleniti commodi rem vitae quis voluptatum velit! Veritatis, explicabo aspernatur nihil, assumenda nulla blanditiis repellat fugiat quidem delectus sunt laborum temporibus ab accusamus mollitia facere harum exercitationem! Nemo dolores expedita neque fugit in officia aut tenetur suscipit ab, quis, unde error modi accusamus tempore dolore, incidunt omnis doloremque quo vero? Corrupti repellendus sequi eum laudantium, modi nemo deleniti dolor maiores quaerat rerum officiis porro fugit quibusdam omnis architecto.</p>
<p>Incidunt sequi minima mollitia aliquid atque officia nemo explicabo unde recusandae libero autem beatae iusto eius sunt quod non quidem fuga, voluptatum eos, alias consectetur aperiam. Vitae corporis recusandae labore accusantium deleniti eligendi sed saepe voluptate, numquam, sint neque odio in eaque libero eum illo aut alias id placeat nemo rerum quas natus. Laudantium omnis veritatis magnam eum sequi, eius a accusantium voluptatibus in excepturi corrupti numquam labore nostrum voluptates incidunt consectetur illum? Iste labore assumenda unde! Deserunt ratione reiciendis cum minima, quam quisquam! Harum obcaecati laborum ea explicabo enim culpa aliquid, quae non placeat quam perferendis numquam suscipit rerum?</p>
<p>Consectetur laboriosam nesciunt deleniti in molestiae eius autem maxime? Enim omnis dicta illum cumque? Assumenda necessitatibus, repellendus porro sequi rerum, quia minima obcaecati unde magnam molestiae, doloribus molestias quod reiciendis animi natus nulla consequatur dolor. Architecto sint veritatis vero qui necessitatibus eaque nemo assumenda consequatur, repellendus minima veniam nihil repudiandae ea sequi fuga voluptate voluptatum incidunt officiis facere inventore iusto doloribus mollitia modi ut. Dignissimos quisquam possimus nihil maiores, excepturi reiciendis aliquid nam consectetur tenetur tempora commodi earum quos ratione vero rem temporibus modi rerum numquam hic voluptas atque assumenda. Iusto vero necessitatibus sed unde, error a sint! Molestias, nesciunt!</p>
<img src="" altsrc="https://picsum.photos/id/1011/1920/1080">
<img src="" altsrc="https://picsum.photos/id/1015/1920/1080">
<img src="" altsrc="https://picsum.photos/id/1020/1920/1080">
<img src="" altsrc="https://picsum.photos/id/1002/1920/1080">
</body>
</html>
Coding Video
Addendum to Above JavaScript Code
Note: iOS has an apparent bug as offsetParent does not work propery. It always returns null in some cases. It should return null when the parent element of the image is not visible. It may be better to check for iOS systems using the clientInfo utility and modify the code appropriately, or just ignore when the parent element is not visible by not using offsetParent (if this works for the case at hand). See following JavaScript code for example. Safari on iPadOS 13 shows as a desktop browser which causes problems because it has all the shortcomings of an iOS device.
var clientInfo = function () {
//rendering engines
var engine = {
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
//complete version
ver: null
};
//browsers
var browser = {
//browsers
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,
edge: 0,
//specific version
ver: null
};
//platform/device/OS
var system = {
win: false,
mac: false,
x11: false,
//mobile devices
iphone: false,
ipod: false,
ipad: false,
ios: false,
android: false,
nokiaN: false,
winMobile: false,
//game systems
wii: false,
ps: false,
xbox: false
};
//detect rendering engines/browsers
var ua = navigator.userAgent;
if (window.opera) {
engine.ver = browser.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)) {
engine.ver = RegExp["$1"];
engine.webkit = parseFloat(engine.ver);
//figure out if it’s Chrome or Safari
if (/Edge\/(\S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.edge = parseFloat(browser.ver);
} else if (/Chrome\/(\S+)/.test(ua) || /CriOS\/(\S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.chrome = parseFloat(browser.ver);
} else if (/Version\/(\S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.safari = parseFloat(browser.ver);
} else {
//approximate version
var safariVersion = 1;
if (engine.webkit < 100) {
safariVersion = 1;
} else if (engine.webkit < 312) {
safariVersion = 1.2;
} else if (engine.webkit < 412) {
safariVersion = 1.3;
} else {
safariVersion = 2;
}
browser.safari = browser.ver = safariVersion;
}
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
engine.ver = browser.ver = RegExp["$1"];
engine.khtml = browser.konq = parseFloat(engine.ver);
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
engine.ver = RegExp["$1"];
engine.gecko = parseFloat(engine.ver);
//determine if it’s Firefox
if (/Firefox\/(\S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.firefox = parseFloat(browser.ver);
}
} else if (/MSIE ([^;]+)/.test(ua)) {
engine.ver = browser.ver = RegExp["$1"];
engine.ie = parseFloat(engine.ver);
} else if (/rv:([^\)]+)\) like Gecko/.test(ua)) {
engine.ver = browser.ver = RegExp["$1"];
engine.ie = engine.gecko = parseFloat(engine.ver);
}
//detect browsers
browser.ie = engine.ie;
browser.opera = engine.opera;
//detect platform
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//detect windows operating systems
if (system.win) {
if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
if (RegExp["$1"] == "NT") {
switch (RegExp["$2"]) {
case "5.0":
system.win = "2000";
break;
case "5.1":
system.win = "XP";
break;
case "6.0":
system.win = "Vista";
break;
case "6.1":
system.win = "7";
break;
case "6.2":
system.win = "8";
break;
case "6.3":
system.win = "8.1";
break;
default:
system.win = RegExp["$2"];
break;
}
} else if (RegExp["$1"] == "9x") {
system.win = "ME";
} else {
system.win = RegExp["$1"];
}
}
}
//mobile devices
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;
//windows mobile
if (system.win == "CE") {
system.winMobile = system.win;
} else if (system.win == "Ph") {
if (/Windows Phone OS (\d+.\d+)/.test(ua)) {;
system.win = "Phone";
system.winMobile = parseFloat(RegExp["$1"]);
}
}
//determine iOS version
if ((p.indexOf("iPhone") == 0 || system.mac) && ua.indexOf("Mobile") > -1) {
if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
system.ios = parseFloat(RegExp.$1.replace("_", "."));
} else {
system.ios = 2; //can’t really detect - so guess
}
}
//determine Android version
if (/Android (\d+\.\d+)/.test(ua)) {
system.android = parseFloat(RegExp.$1);
}
//gaming systems
system.wii = /wii/i.test(ua);
system.ps = /playstation/i.test(ua);
system.xbox = /xbox/i.test(ua);
//return it
return {
engine: engine,
browser: browser,
system: system
};
}();
function windowSize(){
var wid = 0;
var hei = 0;
if(window.innerWidth){
wid = window.innerWidth;
hei = window.innerHeight;
}
else{
if(document.documentElement.clientWidth == 0){
wid = document.body.clientWidth;
hei = document.body.clientHeight;
}
else{
wid = document.documentElement.clientWidth;
hei = document.documentElement.clientHeight;
}
}
return{width:wid,height:hei};
}
function isScrolledIntoView(obj) {
return ((obj.offsetParent || clientInfo.system.ios) ? (obj.getBoundingClientRect().top <= windowSize().height) : false);
}
Comment
