首页 » JavaScript » JS 预加载1

最后更新于 2019年02月25日

预加载其实和延迟加载差不多,一样是使用一个自定义的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元素事件中加上初始化即可,上面代码部分已经写出来了。

预览图:

-50

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao