技术文章分类(180)

技术随笔(11)

jquery图片预处理preload

1、该代码可以直接运行成功，并看到效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script src="http://121.199.20.86/dw/res/js/jquery-1.7.1.min.js"></script>
<title>title</title>
</head>
<body>
    <br><br><br><br><br>  
    <p id="indicator">1</p>
    <p id="full-screen">3</p>
</body>
<style>
    p{width:60%;}
    p img{width:100%;}
</style>
<script type="text/javascript">

    $(function() {
        $.preload([
            "http://img.shu163.com/uploadfiles/wallpaper/2010/6/2010093006114284.jpg",  
            "http://photo.8080.net/xiangce/17306/2007524205720/l_2007524205749.JPG",  
            "http://photo.8080.net/xiangce/17306/2007524205720/l_20075242167.JPG",  
            "http://imga.mumayi.com/android/wallpaper/2011/10/12/2011101205550352773473.jpg",
            "http://www.itoobz.com/uploads/allimg/1211/1-121125102551.jpg",
            "http://pic1.win4000.com/wallpaper/f/5101fb10c4543.jpg",
            "http://images-fast.digu.com/930d8830aef29ffe41bc9d2aa195d7d4_0009.jpg",
            "http://images.gamerlol.com/upload/2012/10/gl2012102511035273256579.jpg"
        ], {
            init: function(loaded, total) {
                $("#indicator").html("Loaded: "+loaded+"/"+total);
            },
            loaded: function(img, loaded, total) {
                $("#indicator").html("Loaded: "+loaded+"/"+total);
                $("#full-screen").append(img);
            },
            loaded_all: function(loaded, total) {
                $("#indicator").html("Loaded: "+loaded+"/"+total+". Done!");
            }
        });
    });

    
    (function($) {
        var imgList = [];
        $.extend({
            preload: function(imgArr, option) {
                var setting = $.extend({
                    init: function(loaded, total) {},
                    loaded: function(img, loaded, total) {},
                    loaded_all: function(loaded, total) {}
                }, option);
                var total = imgArr.length;
                var loaded = 0;
     
                setting.init(0, total);
                for(var i in imgArr) {
                    imgList.push($("<img />")
                        .attr("src", imgArr[i])
                        .load(function() {
                            loaded++;
                            setting.loaded(this, loaded, total);
                            if(loaded == total) {
                                setting.loaded_all(loaded, total);
                            }
                        })
                    );
                }
     
            }
        });
    })(jQuery);
</script>
</html>

使用说明：

1、添加jquery.js库

2、init loaded  loaded_all方法可选

3、一旦图片加载完成，接下来使用这些图片也就非常快了。

 

使用情况：在前一页面中，加载下一个页面的图片，那么进入到下个页面就非常快了。

 

 

 

posted @ 2014-04-14 14:11  坤哥MartinLi  阅读(800)  评论(0)  编辑  收藏  举报