复制下来直接用
<style>
* ul {
list-style:none;
padding:0;
margin:0;
}
.m {
margin-left:auto;
margin-right:auto;
width:150px
}
li {
width:150px;
height:auto;
border:1px dashed blue;
margin-bottom:10px;
}
</style>
<div class="m">
<ul>
<li><img src="http://www.jq22.com/img/cs/500x300a.png" width="100%"></li>
<li><img src="http://www.jq22.com/img/cs/500x300b.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300c.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300d.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300a.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300b.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300c.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300d.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300a.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300b.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300c.png" width="100%"></li>
<li><img imgsrc="http://www.jq22.com/img/cs/500x300d.png" width="100%"></li>
</ul>
</div>
<script>
$(window).scroll(function() {
$('li[isLoaded != 1]').each(function() {
var oT = $(this).offset().top;
var sT = $(window).scrollTop();
var cH = $(window).height();
if (sT + cH >= oT) {
var s = $(this).find('img').attr('Imgsrc');
$(this).find('img').attr('src', s);
$(this).attr('isLoaded', 1);
}
})
})
</script>