Loading the library
|
1 2 3 4 5 |
<!-- make sure jquery is loaded --> <script type="text/javascript" src="../global/scripts/jquery.min.js"></script> <!-- lazy loading jquery library --> <script type="text/javascript" src="jquery-lazy/jquery.lazy.min.js"></script> |
Targeting it…and callbacks
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> console.log("START LAZY LOAD! :D") $(function() { $('.lazy').Lazy({ beforeLoad: function(element) {}, afterLoad: function(element) { if (element.context.currentSrc) console.log(element.context.currentSrc) if (element.context.id) console.log(element.context.id) if (element.context.className) console.log(element.context.className) }, onError: function(element) {}, onFinishedAll: function() {} }); }); </script> |
Specifying the images
Since your jQuery targets class lazy, we must use lazy for classes on img and div tags.
You use data-src to specify the location of the images.
|
1 |
<img id="responsiveImg1" class="lazy" data-src="../global/images/homepagehero-1280-px@2x.png"> |
Note that for img tags, when the images load, it will change to data-src will change to src.
However, if you were to use div, data-src will change to background-image: url(….) .
|
1 |
<div style="height: 428px; width: 401px; border: 2px solid red" class="lazy" data-src="http://jquery.eisbehr.de/lazy/images/4.jpg?t=1523948015" ></div> |