思路：
1，引入jq的一個懶加載插件：jquery.lazyload.js
2，不要給圖檔設定src屬性，設定data-original=”img/p1.jpg”
3，給圖檔加一個預設高度：height: 300px;
4，當圖檔進入視口，才會自動加載
上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style>
img{height: px;display: block;}
</style>
</head>
<body>
<img class="lazy" data-original="img/p1.jpg" alt="">
<img class="lazy" data-original="img/p2.jpg" alt="">
<img class="lazy" data-original="img/p3.jpg" alt="">
<img class="lazy" data-original="img/p4.jpg" alt="">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
</body>
</html>
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)