基于jQuery的图片异步加载和预加载实例

如今的网页中有很多图片，比如相册列表，那么如果一次性读取图片将会瞬间加重服务器的负担，所以我们用jQuery来实现图片的异步加载和预加载功能，这样在页面的可视范围内才会加载图片，当拖动页面至可视界面时，其他图片才会加载，改插件很好地实现了图片异步加载功能。

在线预览   源码下载

html代码部分：

Html代码  

1. <div id="content">  
2.         <div id="button">  
3.             <ul>  
4.                 <li>小图</li>  
5.                 <li>中图</li>  
6.                 <li>大图</li>  
7.             </ul>  
8.         </div>  
9.         <div id="image">  
10.         </div>  
11.     </div>  
12.     <script type="text/javascript">  
13.         $(function () {  
14.             //把图片写入htm  
15.             var imgArr = "";  
16.             for (var i = 1; i <= 25; i++) {  
17.                 if (i <= 25) {//因上传到17素材超过规定大小，不得不将过多的图片略去，为了达到更好的效果，可以自行修改此循环代码，并且增加其余图片，体验异步加载  
18.                     imgArr += '<img class="scrollLoading" data-url="image/' + i + '.jpg" src="image/grey.gif" />';  
19.                 } else {  
20.                     imgArr += '<img class="scrollLoading" data-url="image/13.jpg" src="image/grey.gif" />';  //超过26张后显示的图片  
21.                 }  
22.             }  
23.             $("#image").append(imgArr);  
24.             $("img").load(function () {  
25.                 //图片默认隐藏    
26.                 $(this).hide();  
27.                 //使用fadeIn特效    
28.                 $(this).stop().fadeIn("5000");  
29.             });  
30.             // 异步加载图片，实现逐屏加载图片  
31.             $(".scrollLoading").scrollLoading();  
32.   
33.   
34.             ////以下代码为效果代码，非异步加载核心  
35.   
36.             //设置页面最外层容器的最小高度为屏幕的高度  
37.             $("#content").css({ "min-height": $(window).height() });  
38.             $("#button li:first-child").addClass("li_hover");  
39.             var index_button = 0;  
40.             $("#button").on("click", "ul li", function () {  
41.                 index_button = $(this).index();  
42.                 $("#button li").removeClass("li_hover");  
43.                 $(this).addClass("li_hover");  
44.                 if (index_button == 0) {//效果一  
45.                     $("img").stop().animate({ "width": "225px", "height": "132px" }, 600);  
46.                 } else if (index_button == 1) {//效果二  
47.                     $("img").stop().animate({ "width": "500px", "height": "294px" }, 600);  
48.                 } else {//效果三  
49.                     $("img").stop().animate({ "width": "1050px", "height": "618px" }, 600);  
50.                 }  
51.             });  
52.             $("#button li").hover(function () {  
53.                 $(this).addClass("li_hover");  
54.             }, function () {  
55.                 if (index_button != $(this).index()) {  
56.                     $(this).removeClass("li_hover");  
57.                 }  
58.             });  
59.   
60.         });  
61.     </script>  

 via:http://www./Article/14496