JS 预加载1

预加载其实和延迟加载差不多，一样是使用一个自定义的html属性保存好正确的大图地址，然后当鼠标点击后将正确的大图地址替换给弹出的显示元素上。

html部分：

//这是弹窗显示部分
<div class="">
    <div id="photo_masked"></div>
    <div id="photo_big">
        <i class="photo_off"><span class="off">+</span></i>
        <h2 id="photo_title">预加载图片</h2>
        <div class="big">
            <img src="images/loading.gif" alt=""  class=""/>
        </div>
    </div>
</div>

这是html图片部分，大图自定义属性为bsrc

<img xsrc="images/p1.jpg" bsrc="images/p1_big.jpg"  src="images/ph_login1.jpg" alt="" class="wait_load" />

弹窗部分，显示的img元素默认加载的是loading.gif过渡动画的一个动态图，很小。

css部分就不做多的介绍了，都没啥难点，会写都ok

然后js部分！

设置原理：

当图片被点击后，弹窗，先显示gif图片过渡，这时会有一个新建的img元素，这个元素用来加载大图，加载完毕后再将大图的地址给到弹窗里的img元素，这时再加一个透明度过渡的动画，以上就完成了。

那么，如何判断图片是否加载完毕呢?

创建的图片元素会有两个事件，一个是onload事件，一个是onerror事件，顾名思义，第一个是判断加载是否完成，第二个是加载失败，这样就好办了，我们只需要用事件判断一下即可。

但是由于ie浏览器的问题，判断加载的事件必须要在图片加载之前，于是这样写

//图片预加载
    var photo = $('#photo_big');
    var photo_masked = $('#photo_masked');
    $('#photo dl dt img').click(function(){
        photo.css('clip','auto').css('opacity','1').center().resize(function(){
            if(photo.css('opacity') == '1'){
                photo_masked.Masked();
            };
        });
        photo_masked.css('display','block').Masked().animation({
            'attr' : 'o',
            'end' : 30,
            'step' : 7
        });
        
        //大图片加载
        //先创建一个元素用于保存大图
        var temp_img = new Image();
        
        //当大图加载完毕后
        $(temp_img).bind('load',function(){
            $('#photo_big .big img').attr('src',temp_img.src).css('top',0).css('width','100%').css('height','100%').opacity(0).animation({
                'attr' : 'o',
                'end' : 100
            });
        });
        
        //让创建的图片元素加载大图，但是因为ie的问题，图片的onload事件必须在加载代码的前面，所以load事件在加载之前
        temp_img.src = $(this).attr('bsrc');
        
    });
    $('#photo_big .photo_off').click(function(){
        photo.css('clip','rect(0 0 0 0)').css('opacity','0');
        photo_masked.animation({
            'attr' : 'o',
            'end' : 0,
            'step' : 7,
            'fn' : function(){
                photo_masked.removeMasked();
            }
        });
        
        //关闭后初始化大图图片
        $('#photo_big .big img').attr('src','images/loading.gif').css('top','224px').css('width','32px').css('height','32px');
        
    });

使用new Image()的方法创建一个图片元素，这个元素用于缓存之用，当图片加载完毕后，将大图的图片地址替换掉弹出的img图片地址，并且加上透明度的动画过渡，css的设置这个看个人css怎么写再怎么修改，然后加载部分就已经完成了。

初始化部分

当大图显示后，此时弹窗的img图片地址就是你点击的图片大图地址，但是当你换另外一张是，这时过渡会从上一张过渡到这一张，这样是不对的，有残留，这个时候我们需要再次把弹窗的img图片元素的src地址更换为gif图片地址，那么我们再off元素事件中加上初始化即可，上面代码部分已经写出来了。

预览图：