更新于

JS 预加载1

发布于 / 分类: JavaScript / 暂无评论 / 阅读量: 651

预加载其实和延迟加载差不多,一样是使用一个自定义的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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买