-
Lazy Load jQuery Spinner
over 7 years ago
Lazy load jquery spinner is used for the delays loading of images used on the web page. It improves the page load time, by using this plugin user can see the custom effects and data attributes, It is a fast, easy and lightweight script used for loading a high-resolution image. It supports many attributes like data-src attribute specify both width and height by doing this browser can allocate the space on your screen. Here I am explaining what I have done in this example.
For Example: There are 7 images which are going to appear on this pages on the users scroll, as when a user reached to the bottom of the page he/she will get detail information on the left panel about the before-load and after load of an image, including the error message will shown on consol.log() if there is any error in the image Url. so it will be easy to detect the error from there. At the end, a user can get information about the finished load of all images.
Source Code HTML:
<!DOCTYPE html> <html> <head> <title>lazy load</title> </head> <body> <h3 class="text-center">Use of lazy load Spinner</h3> <div id="sidebar" > <ul></ul> </div> <div class="right-side"> <img class="lazy" data-src="http://www.planwallpaper.com/static/images/1080p-HD-Wallpapers-9.jpg"> <img class="lazy" data-src="http://www.pixelstalk.net/wp-content/uploads/2016/06/Desktop-HD-Nature-Wallpapers.jpg"> <img class="lazy" data-src="http://www.hdnicewallpapers.com/Walls/Big/Countries%20and%20City/Yokohama_City_of_Japan_HD_Wallpaper.jpg"> <img class="lazy" data-src="http://www.hdnicewallpapers.com/Walls/Big/Countries%20and%20City/Central_Park_in_New_York_US_Tourist_Place_HD_Wallpapers.jpg"> <img class="lazy" data-src="http://www.intrawallpaper.com/static/images/Design-Graphic-Wallpapers-HD.jpg"> <img class="lazy" data-src="http://www.planwallpaper.com/static/images/8040518319d1447bbf20cfb44047d0d43desktop-wallpaper.jpg"> <img class="lazy" data-src="http://www.pixelstalk.net/wp-content/uploads/2016/06/Desktop-HD-Nature-Wallpapers.jpg"> </div> </body> </html>Source Code CSS:
.lazy{ width: 700px; height: 500px; display: block } .text-center{text-align: center} #sidebar{ float: left; width: 20%; } .right-side{ float: left; width: 80%; }Source Code Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="js/jquery.lazy.min.js"></script> <script> $(function() { var sidebar = $('div#sidebar'), loadedElements = 0; $('.lazy').lazy( { beforeLoad: function(element){ console.log('image "' + (element.data('src')) + '" is about to be loaded'); }, afterLoad: function(element) { loadedElements++; $('ul').append('<li>element ' + loadedElements+ ' loaded</li>'); console.log('image "' + (element.data('src')) + '" was loaded successfully'); }, onError: function(element) { loadedElements++; $('ul').append('<li>element ' + loadedElements + ' NOT loaded</li>'); console.log('image "' + (element.data('src')) + '" could not be loaded'); }, onFinishedAll: function() { console.log('finished loading ' + loadedElements + ' elements'); console.log('lazy instance is about to be destroyed') } }); }); </script>
0 Comment(s)