yevlakhov
4/8/2015 - 6:20 PM
jQuery Lazy - delayed image loader // source http://jsbin.com/lutoso
jQuery Lazy - delayed image loader
// source http://jsbin.com/lutoso
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Lazy - delayed image loader</title>
<link rel="stylesheet" type="text/css" href="http://jquery.eisbehr.de/lazy/additional/styles.css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="http://jquery.eisbehr.de/lazy/additional/prettify.js?t=b0774152aa3318b0136737a535df5b79a099cd4bea8dcbd7d7b73a4efc4e68ce"></script>
<script type="text/javascript" src="http://jquery.eisbehr.de/lazy/additional/jquery.lazy.js?t=802a9f0603f1ddeb7404d9e863efca04a099cd4bea8dcbd7d7b73a4efc4e68ce"></script>
<!--<script type="text/javascript" src="http://jquery.eisbehr.de/lazy/additional/jquery.config.js?t=2f3b172b8a9ee938f2b51f42a1b60afba099cd4bea8dcbd7d7b73a4efc4e68ce"></script>-->
</head>
<body>
<div id="container">
<div id="content">
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/1.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/2.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/3.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/4.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/5.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/6.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/7.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/8.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/9.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/10.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<script type="text/javascript">
var loaded = 0;
jQuery(document).ready(function() {
jQuery("img.lazy").lazy({
effect: "fadeIn",
effectTime: 1500,
threshold: 0,
beforeLoad: function() {
var sidebarList = jQuery("div#sidebar ul");
loaded++;
sidebarList.children(":first").html("loaded: <em>" + loaded + "<\/em>");
sidebarList.append("<li><span>loading " + loaded + ". image<\/span><\/li>");
}
});
});
</script>
</div>
</div>
<script id="jsbin-source-html" type="text/html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Lazy - delayed image loader</title>
<link rel="stylesheet" type="text/css" href="http://jquery.eisbehr.de/lazy/additional/styles.css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"><\/script>
<script type="text/javascript" src="http://jquery.eisbehr.de/lazy/additional/prettify.js?t=b0774152aa3318b0136737a535df5b79a099cd4bea8dcbd7d7b73a4efc4e68ce"><\/script>
<script type="text/javascript" src="http://jquery.eisbehr.de/lazy/additional/jquery.lazy.js?t=802a9f0603f1ddeb7404d9e863efca04a099cd4bea8dcbd7d7b73a4efc4e68ce"><\/script>
<\!--<script type="text/javascript" src="http://jquery.eisbehr.de/lazy/additional/jquery.config.js?t=2f3b172b8a9ee938f2b51f42a1b60afba099cd4bea8dcbd7d7b73a4efc4e68ce"><\/script>-->
</head>
<body>
<div id="container">
<div id="content">
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/1.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/2.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/3.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/4.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/5.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/6.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/7.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/8.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/9.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<div class="image">
<img class="lazy" data-src="http://jquery.eisbehr.de/lazy/examples/images/10.jpg?t=1428515057" src="" border="0" alt="Lazy Image" />
</div>
<script type="text/javascript">
var loaded = 0;
jQuery(document).ready(function() {
jQuery("img.lazy").lazy({
effect: "fadeIn",
effectTime: 1500,
threshold: 0,
beforeLoad: function() {
var sidebarList = jQuery("div#sidebar ul");
loaded++;
sidebarList.children(":first").html("loaded: <em>" + loaded + "<\/em>");
sidebarList.append("<li><span>loading " + loaded + ". image<\/span><\/li>");
}
});
});
<\/script>
</div>
</div>
</body>
</html>
</script>
</body>
</html>