JQ image lazy loading

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
}
</style>
</head>
<body>
<ul class="list">
    <li><img class="lazy" alt="" width="640" height="480" data-original="img/img1.gif" /></li>
    <li><img class="lazy" alt="" data-original="img/img2.gif" /></li>
    <li><img class="lazy" alt="" data-original="img/img3.gif" /></li>
    <li><img class="lazy" alt="" width="640" height="480" data-original="img/img4.gif" /></li>
</ul>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/lazy.min.js" ></script>
<script>
$(function() {
	// load by default
    //$("img.lazy").lazyload();
    // Early loading when 200 pixels from the screen
//  $("img.lazy").lazyload({
//  	threshold : 200
//	});
	//click to load
//	$("img.lazy").lazyload({
//  	event : "click"
//	});
	//load the fade-in effect
	$("img.lazy").lazyload({
	    effect : "fadeIn"
	});
});
</script>
</body>
</html>

 

Effect picture:

 

 

 

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327034222&siteId=291194637