This is simple code snippet of lazy loading of contents in jquery. jQuery Lazy Loading of contents is well demonstrated here, I am using javascript event document.scroll function to perform it. Use this link to copy jquery API of google hosting or you can directly use jQuery api from here.
Download the tutorial from here
STEP I : Use the jQuery Library
Create a container to load a list of content with lazy loading.
|
1 2 3 4 5 |
<h1>List of 10 alberts</h1> <div class="albert_container"></div> |
STEP II : Create a Loader
Create a loader that will toggle during fetch time.
|
1 2 3 4 5 6 7 |
<div class="loading_albert" style="display:none;"> <span>Loading ....</span> </div> |
STEP III : Finally write a script to perform the lazy loading
All together
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<html> <head> <title>Albert Loader</title> <style> .albert_child { padding: 10px; background: rgba(128, 128, 128, 0.22); margin: 45px; } .loading_albert { position: fixed; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.21); height: 100%; width: 100%; } .loading_albert span { color: white; position: absolute; margin-left: 42%; margin-top: 16%; font-size: 81px; } </style> </head> <body> <h1>List of 10 alberts</h1> <div class="albert_container"></div> <div class="loading_albert" style="display:none;"><span>Loading ....</span></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function () { var req = ''; $(window).scroll(function () { console.log(req); if (req === 'sent') { return false; } if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { req = 'sent'; showLoader(); setTimeout(function () { fetchAlberts(); }, 1000); } }); function fetchAlberts() { var html = ''; $.get("/ByKishor/data.php").done(function (response) { var data = JSON.parse(response); for (var i in data) { html += "<div class='albert_child'><b>" + i + "</b> : " + data[i].name + "</div>"; } $(".albert_container").append(html); req = ''; hideLoader(); }); } function showLoader() { $(".loading_albert").show(); } function hideLoader() { $(".loading_albert").hide(); } fetchAlberts(); }); </script> </body> </html> |
jQuery Lazy Loading – Algorithm
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
fn on_document_scroll { check request if sent return false //to negate repeated scroll action else isDocumentScrolledToBottom ? request = sent true lazyLoad else return false } fn lazyLOad { ajax fetch content parse array prepare html append the content request = blank } |
Download the tutorial from here
Please feel free to post me back for any kind of feedback or improvements. Thanks ! 🙂
[amazon_link asins=’B01FM7GIR4,B01FM7GGFI,B00FXLCG7G,B01IKOMAZU,B01B4VFH6U’ template=’ProductCarousel’ store=’javascriptsolution-21′ marketplace=’IN’ link_id=’29f6a713-526e-11e7-a7d8-f1fc1b7f9788′]
