Skip to content

Instantly share code, notes, and snippets.

@pangyuteng

pangyuteng/lazyload.html

Created March 17, 2022 21:12
Show Gist options
  • Save pangyuteng/69f01c08f096bb7e270afac80c4ce453 to your computer and use it in GitHub Desktop.
Save pangyuteng/69f01c08f096bb7e270afac80c4ce453 to your computer and use it in GitHub Desktop.
Download ZIP
demo lazy load with call back using jquery.lazy
Raw
lazyload.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.lazy {
width: 700px;
height: 467px;
background: #f2dede;
color: #a94442;
}
div.lazy.loaded {
background: #dff0d8;
color: #3c763d;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.ajax.min.js"></script>
</head>
<script id="myblock" type="text/html">
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wikipedia-logo-v2-es.svg/1200px-Wikipedia-logo-v2-es.svg.png" height=300 width=300/>
</div>
</script>
<script>
(function($) {
$.Lazy('examplePlugin', function(element, response) {
// just for demonstration, write some text inside element
element.html(document.getElementById('myblock').innerHTML)
.addClass("loaded");
// return loaded state to Lazy
response(true);
});
})(window.jQuery || window.Zepto);
</script>
</head>
<body>
<div class="lazy" id="box-1" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-2" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-3" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-4" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-5" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-6" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-7" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-8" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-9" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-0" data-loader="examplePlugin">not loaded</div>
</body>
<script>
$(function() {
$('.lazy').lazy({
beforeLoad: function(element) {
var mydiv = element[0].id;
console.log('div "' + mydiv + '" is about to be loaded');
},
threshold: 0,
});
});
</script>
</html>
@pangyuteng
Copy link
Author

references

http://jquery.eisbehr.de/lazy/example_create-own-plugin
http://jquery.eisbehr.de/lazy/example_callback-functions
https://stackoverflow.com/questions/16270761/how-to-insert-a-large-block-of-html-in-javascript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment