jquery图片预加载

var imgshow=new Image();    //首先实例化一个 img 对象
        imgshow.src = 'mm/1.jpg';  //当这里给定地址之后,好像就会立即下载图片
        alert(imgshow.width);    //由于 刚给地址,还没下载到本地 这里获取图片    宽度一般获取不了        
        imgshow.onload = function() { //这里是个 图片下载完之后 回调的一个函数 火狐会每次执行,但是 IE下 如果浏览器已经缓存了则不再执行    
                alert(imgshow.width);                            
           $("#showImg").attr('src',imgshow.src);
           ///document.body.appendChild(imgshow);                                        
        }                    
        alert(imgshow.complete); //这个参数 是判断浏览器 是否已经缓存了这个图片
        $("#showImg").attr('src',imgshow.src);//这行是针对 IE 用的

 

图片


再看看上图 图片加载,先模糊后清晰, 刚开始  我不知道 他什么原理 ,后来看 发现 原来下面 三张小图片, 长宽 都比较小,文件也不大所以

快速的就下载下来,  然后  把下面的小图片, 长宽 加大到上面大图的尺寸,然后放到 上面大图中,自然就模模糊糊了, 然后 等大图加载完了之后再更改 为大图的 路径, 自然就变清晰了, 原来 由模糊变清晰是这样来的。

 


你可能感兴趣的:(jquery,浏览器,function,下载图片,图片下载)