<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
.box{width: 1000px;height: 7000px;position: relative;}
.igm1,.igm2,.igm3{width: 1000px;height: 1000px;margin-bottom: 500px;}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.js" ></script>
<body>
<div class="box">
<!--data-original是要加载的图片 src中的是加载动画-->
<img class="igm1" data-original='http://img.8kmm.com/2014/2/201402150857153283.jpg' src="ori.png"/>
<img class="igm2" data-original='http://img.8kmm.com/2014/2/201402150857161214.jpg' src="ori.png"/>
<img class="igm2" data-original='http://img.8kmm.com/2014/2/201402150857172803.jpg' src="ori.png"/>
</div>
<script type="text/javascript">
$("img").lazyload({
effect :"fadeIn",
threshold :200
});
</script>
</body>
</html>
新建jquery.lazyload.js文件 导入下面代码即可,当然你也可以去百度上搜
(function($, window, document, undefined) {
var $window = $(window);
$.fn.lazyload = function(options) {
var elements = this;
var $container;
var settings = {
threshold : 0,
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : false,
appear : null,
load : null,
place