Foundation 6 + Lazy Loading

Developer
Simon Codrington
Size
2,178 Kb
Views
125,488
  1. Foundation 6 + Lazy Loading Previews
  2. Foundation 6 + Lazy Loading HTML Codes
  3. Foundation 6 + Lazy Loading CSS Codes
  4. Foundation 6 + Lazy Loading JS Codes

How do I make an foundation 6 + lazy loading?

A quick set up of lazy loading images plus foundation. What is a foundation 6 + lazy loading? How do you make a foundation 6 + lazy loading? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

Foundation 6 + Lazy Loading Previews
IQ Test

Foundation 6 + Lazy Loading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Foundation 6 + Lazy Loading</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://rawgit.com/zurb/foundation-sites/develop/dist/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <h2>Foundation Lazy Load Images</h2> <h4>Using Lazy Load jQuery plugin to </h4> <p>Lazy load will only load images that are within the viewport, meaning images outside the viewport will be loaded asynchronously</p> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=1"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=2"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=3"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=4"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=5"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=6"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=7"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=8"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=9"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=10"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=11"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=12"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=13"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=14"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=15"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=16"/></div></div> <div class="small-6 medium-4 large-3 columns"><div class="imgwrap"><img class="lazyimg" data-original="http://loremflickr.com/300/300/?t=17"/></div></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/zurb/foundation-sites/develop/dist/foundation.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js'></script> <script src="js/index.js"></script>
</body>
</html>

Foundation 6 + Lazy Loading - Script Codes CSS Codes

.imgwrap{ width: 100%; height: 0px; padding-bottom: 100%; position: relative; margin-bottom: 30px;
}
.lazyimg{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transition: all 700ms linear;
}

Foundation 6 + Lazy Loading - Script Codes JS Codes

 $('.lazyimg').lazyload({ effect : "fadeIn", effect_speed: 800, load: function(elements_left, settings){ } });
Foundation 6 + Lazy Loading - Script Codes
Foundation 6 + Lazy Loading - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 2,178 Kb
Views 125,488
Do you need developer help for Foundation 6 + Lazy Loading?

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!

Simon Codrington (simoncodrington) Script Codes
Name
Fancy Card Animation
CSS animations on scroll - Fade from bottom up
CSS animations on scroll - Multi step move
Foundation 6 - Flex Grid
Stripe Header Grid
Animating single characters in a string
CSS animations on scroll - Slide in from left
Test iFrame
Foundation 6 - Motion UI
Animated border lines on hover
Create amazing Facebook ads 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!