Infinite Scroll Lazy Loading Gallery With Simple jQuery
How do I make an infinite scroll lazy loading gallery with simple jquery?
A present for February by @Xilantra. Working in progress!. What is a infinite scroll lazy loading gallery with simple jquery? How do you make a infinite scroll lazy loading gallery with simple jquery? This script and codes were developed by Afiq Xilantra on 13 June 2022, Monday.
Infinite Scroll Lazy Loading Gallery With Simple jQuery Previews
Infinite Scroll Lazy Loading Gallery With Simple jQuery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Infinite Scroll Lazy Loading Gallery With Simple jQuery</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="menu pusing" data-dia="Menu" title="I'll be working on this later!"><span></span></a>
<div class="cerita"> <h1> Infinite Scroll Lazy Loading Gallery With Simple jQuery </h1> <p>By: <a href="http://twitter.com/xilantra" alt="Twitter" title="Twitter">@Xilantra</a>, a present for February. [WIP] </p>
</div>
<div class="karya"> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </div> <div class="test"> <img src="http://lorempixel.com/700/450/people/" /> </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>
Infinite Scroll Lazy Loading Gallery With Simple jQuery - Script Codes CSS Codes
body { font-family: Open Sans, sans-serif; color: coral;
}
h1 { font-weight: 300; font-size: 3em;
}
a { text-decoration: none; color: cornflowerblue;
}
a:hover { text-decoration: none; color: tomato;
}
img { width: 100%; height: auto;
}
.cerita { text-align: center; padding-top: 40px;
}
.karya { margin:0px auto; text-align:left; padding:15px;
}
.test { padding-top: 40px;
}
.menu { position: fixed; display: inline-block; width: 30px; height: 30px; margin: 25px; opacity: 0.5;
}
.menu:hover { opacity:1;
}
.menu::after { content: attr(data-dia); padding-left: 50px; color: deepskyblue;
}
.menu span { margin: 0 auto; position: relative; top: 12px;
}
.menu span:before, .menu span:after { position: absolute; content:'';
}
.menu span, .menu span:before, .menu span:after { width: 40px; height: 4px; background-color: deepskyblue; display: block;
}
.menu span:before { margin-top: -12px;
}
.menu span:after { margin-top: 12px;
}
.pusing span { -webkit-transition: .2s ease 0;
}
.pusing span:before, .pusing span:after { -webkit-transition-property: margin, opacity; -webkit-transition-duration: .2s, 0; -webkit-transition-delay: .2s;
}
.pusing:hover span { -webkit-transform: rotate(90deg); -webkit-transition-delay: .2s;
}
.pusing:hover span:before, .pusing:hover span:after { margin-top: 0px; opacity: 0; -webkit-transition-delay: 0, .2s;
}Infinite Scroll Lazy Loading Gallery With Simple jQuery - Script Codes JS Codes
$(".karya div").slice(10).hide(); var mincount = 10; var maxcount = 20; $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) { $(".karya div").slice(mincount, maxcount).slideDown(1400); mincount = mincount + 10; maxcount = maxcount + 10 } });
| Developer | Afiq Xilantra |
| Username | Afiq |
| Uploaded | June 13, 2022 |
| Rating | 3.5 |
| Size | 2,552 Kb |
| Views | 40,480 |
Do you need developer help for Infinite Scroll Lazy Loading Gallery With Simple jQuery?
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!
Afiq Xilantra (Afiq) Script Codes
| Name | Size |
| Responsive HTML5 Map | 2,627 Kb |
| Login with flip 3d animation | 3,012 Kb |
| Animated 404 | 2,456 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Addthis_button | Esambino | 1,691 Kb |
| Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
| A Pen by Bryan | Brydave | 2,286 Kb |
| HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
| Pomodoro Clock | Osycon | 3,705 Kb |
| GrcJS | Vino6 | 2,047 Kb |
| A Pen by Anoop | Anoopjohn | 330,760 Kb |
| The Rope | Chribbe | 2,886 Kb |
| Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
| Sticky div | Kaslab | 2,225 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!