Lazy Load Test

Developer
Jeremy P. Beasley
Size
3,264 Kb
Views
34,408
  1. Lazy Load Test Previews
  2. Lazy Load Test HTML Codes
  3. Lazy Load Test CSS Codes
  4. Lazy Load Test JS Codes

How do I make an lazy load test?

What is a lazy load test? How do you make a lazy load test? This script and codes were developed by Jeremy P. Beasley on 08 September 2022, Thursday.

Lazy Load Test Previews
IQ Test

Lazy Load Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lazy Load Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mama"> <div class="kiddies"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed justo nisl. Maecenas vitae luctus nibh. Vivamus auctor sed diam ac ullamcorper. Curabitur ut elit diam. Quisque eget euismod tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vestibulum euismod tempus. Nulla varius et justo vitae bibendum. Ut nibh risus, laoreet at adipiscing nec, porttitor id turpis. Donec ultricies orci nisi, at mollis nisl faucibus interdum. Praesent suscipit ligula ut tincidunt condimentum.</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/black.gif" class="lazy" data-src="https://farm3.staticflickr.com/2840/9042399407_bf04388aca_o.jpg" width="100" height="100"></p> </div> <div class="kiddies"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed justo nisl. Maecenas vitae luctus nibh. Vivamus auctor sed diam ac ullamcorper. Curabitur ut elit diam. Quisque eget euismod tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vestibulum euismod tempus. Nulla varius et justo vitae bibendum. Ut nibh risus, laoreet at adipiscing nec, porttitor id turpis. Donec ultricies orci nisi, at mollis nisl faucibus interdum. Praesent suscipit ligula ut tincidunt condimentum.</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/black.gif" class="lazy" data-src="https://farm8.staticflickr.com/7116/7550729370_9d59022942_o.jpg" width="100" height="100"></p> </div> <div class="kiddies"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed justo nisl. Maecenas vitae luctus nibh. Vivamus auctor sed diam ac ullamcorper. Curabitur ut elit diam. Quisque eget euismod tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vestibulum euismod tempus. Nulla varius et justo vitae bibendum. Ut nibh risus, laoreet at adipiscing nec, porttitor id turpis. Donec ultricies orci nisi, at mollis nisl faucibus interdum. Praesent suscipit ligula ut tincidunt condimentum.</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/black.gif" class="lazy" data-src="https://farm3.staticflickr.com/2841/9027758425_4de5239bb1_o.jpg
" width="100" height="100"></p> </div> <div class="kiddies"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed justo nisl. Maecenas vitae luctus nibh. Vivamus auctor sed diam ac ullamcorper. Curabitur ut elit diam. Quisque eget euismod tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vestibulum euismod tempus. Nulla varius et justo vitae bibendum. Ut nibh risus, laoreet at adipiscing nec, porttitor id turpis. Donec ultricies orci nisi, at mollis nisl faucibus interdum. Praesent suscipit ligula ut tincidunt condimentum.</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/black.gif" class="lazy" data-src="https://farm8.staticflickr.com/7397/9042401115_f8a1353e72_o.jpg
" width="100" height="100"></p> </div> <div class="kiddies"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed justo nisl. Maecenas vitae luctus nibh. Vivamus auctor sed diam ac ullamcorper. Curabitur ut elit diam. Quisque eget euismod tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vestibulum euismod tempus. Nulla varius et justo vitae bibendum. Ut nibh risus, laoreet at adipiscing nec, porttitor id turpis. Donec ultricies orci nisi, at mollis nisl faucibus interdum. Praesent suscipit ligula ut tincidunt condimentum.</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/black.gif" class="lazy" data-src="https://farm7.staticflickr.com/6204/6080813256_1f787dbde7_o.jpg
" width="100" height="100"></p> </div> <div class="kiddies"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed justo nisl. Maecenas vitae luctus nibh. Vivamus auctor sed diam ac ullamcorper. Curabitur ut elit diam. Quisque eget euismod tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vestibulum euismod tempus. Nulla varius et justo vitae bibendum. Ut nibh risus, laoreet at adipiscing nec, porttitor id turpis. Donec ultricies orci nisi, at mollis nisl faucibus interdum. Praesent suscipit ligula ut tincidunt condimentum.</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/black.gif" class="lazy" data-src="https://farm6.staticflickr.com/5553/14231040584_701f9b296a_o.jpg"></p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Lazy Load Test - Script Codes CSS Codes

.mama { width: 80%; margin: 10%;
}
.kiddies { padding: 5%; margin: 5% 0; width: 90%; background: pink;
}
.kiddies img { max-width: 100%;
}
.loading { background: url(https://f.cl.ly/items/0h1n262r2O3H2G0y3x2C/spiffygif_30x30.gif);
}

Lazy Load Test - Script Codes JS Codes

/* lazyload.js (c) Lorenzo Giuliani * MIT License (https://www.opensource.org/licenses/mit-license.html) * * expects a list of: * `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">` */
!function(window){ var $q = function(q, res){ if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b<f;b++) l[b].currentStyle.f && c.push(l[b]); a.removeRule(0); res = c; } return res; } , addEventListener = function(evt, fn){ window.addEventListener ? this.addEventListener(evt, fn, false) : (window.attachEvent) ? this.attachEvent('on' + evt, fn) : this['on' + evt] = fn; } , _has = function(obj, key) { return Object.prototype.hasOwnProperty.call(obj, key); } ; function loadImage (el, fn) { var img = new Image() , src = el.getAttribute('data-src'); img.onload = function() { if (!! el.parent) el.parent.replaceChild(img, el) else el.src = src; fn? fn() : null; } img.src = src; } function elementInViewport(el) { var rect = el.getBoundingClientRect() return ( rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], function () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call is not callable under our lovely IE8 for (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll);
}(this);​
Lazy Load Test - Script Codes
Lazy Load Test - Script Codes
Home Page Home
Developer Jeremy P. Beasley
Username jeremypbeasley
Uploaded September 08, 2022
Rating 3
Size 3,264 Kb
Views 34,408
Do you need developer help for Lazy Load Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeremy P. Beasley (jeremypbeasley) Script Codes
Name
Scroll to Top
Responsive photo tiles
Art 3.2
Lightbox from BG Image
Money Entry
Number Climb
Google Image Search by Keyword
Credit Card Form Auto-tab Continuous Typing V2
The Big List
Type to Search Anywhere
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!