图片预加载、瀑布流+图片预加载

图片预加载

图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示，但为了提高网页的完整性，给未能及时加载出来的图片添加一个图标告诉用户正在加载图片。

window.onload=function(){
//使用闭包函数
                var imgObj=(function(){
                    //创建一个img对象，利用该对象帮程序请求正式的图片
                    var imgObject=new Image();
                    
                    //创建一个img标签，用来展示图片
                    var imgTag=document.createElement('img');
                    //把imgTag拼接进文档流
                    document.body.appendChild(imgTag);
                    //当imgObject把图片下载完毕时，会触发该对象的load事件，在这个事件中，
                    //把imgTag展示的占位图片替换为正式图片
                    imgObject.onload=function(){
                        imgTag.src=this.src;
                    }
                    
                    return {
                        src:function(src){
                            //给图片标签设置占位图
                            imgTag.src='http://ww1.sinaimg.cn/mw1024/64eeab82gw1f9bjahlklaj203k03kmwy.jpg';
                            //给图片标签设置正式图
                            imgObject.src=src;
                            
                        }
                    }
                })();
                imgObj.src('http://img10.360buyimg.com/n1/s450x450_jfs/t3079/22/1186487500/120409/d87f6ab7/57c7c23fNec4956f3.jpg');
            }

瀑布流+图片预加载