正在加载中

最后更新于 2019年03月02日

图片的预加载已经差不多了,目前我们再稍微修改两处就可以了。

首先是添加页脚 : 5/12

添加也很简单添加一个em元素,然后通过js动态替换内容即可。

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=""/>
            <strong class="sl">&lt;</strong>
            <strong class="sr">&gt;</strong>
            <span class="left"></span>
            <span class="right"></span>
            <em class="index"></em>
        </div>
    </div>
</div>

这里添加了一个class为index的em元素,设置position: absolute;绝对定位,字体颜色大小,间距就行了。

js部分:

首先我们这个页脚是每次更换图片都会改变的,那么每次都会调用的代码只有一个,那就是之前封装的prev_next_img函数,于是这样:

function prev_next_img(children){
        var prev = prevIndex($(children).index(),children.parentNode);
        var next = nextIndex($(children).index(),children.parentNode);
        
        
        //创建用于储存预加载图片的元素
        
        var prev_img = new Image();
        var next_img = new Image();
        
        prev_img.src = $('#photo dl dt img').getElementBase(prev).attr('bsrc');
        next_img.src = $('#photo dl dt img').getElementBase(next).attr('bsrc');
        
        //将图片地址传出去
        $('#phpoto_big .big .left').attr('src',prev_img.src);
        $('#phpoto_big .big .right').attr('src',next_img.src);
        //将点击的图片索引值传出去
        $('#phpoto_big .big img').attr('index',$(children).index());
        
        //图片页脚
        $('#phpoto_big .big em').html($(children).index() + 1 +'/'+$('#photo dl dt img').length());
    };

$(children).index()可以获取到当前图片的索引值,但是这个索引值是从0开始的,但是我们平时图片计数都是从1开始,于是+1来得到需要的值,然后再获取到整个图片的数量即可,$('#photo dl dt img').length()搞定。

页脚添加完毕。

现在我们做一个小小的优化,当我们图片再快速切换的时候,图片如果并没有完全加载之前就切换了,那么就会卡在之前的图片上,非常不好,这里我们要用login的动态图来表示正在加载,也是用一个load的事件来判断。

并且我们还要加上透明度的动画效果,但是如果只是单个图片透明度从0到100,那么就会闪白,这里我们通过先给.big设置一个背景色就会从视觉上消除这个小问题,但这并不是全部,好戏好在后面。

我们首先要再用户点击上一张的时候,先将图片替换成login,然后通过load事件再来替换正确的图片地址,这样就不会有加载不完整卡在上一张图片的问题。

//上一张
    $('#phpoto_big .big .left').click(function(){
        
        //先将login图片重置为默认
        $('#photo_big .big img').attr('src','images/loading.gif').css('top','224px').css('width','32px').css('height','32px');
        
        //做一个图片加载判断
        var current_img = new Image();
        
        $(current_img).bind('load',function(){
            $('#phpoto_big .big img').attr('src',current_img.src).css('top',0).css('width','100%').css('height','100%').opacity(0).animation({
                'attr' : 'o',
                'end' : 100,
                'time' : 50
            });
        });
        
        current_img.src = $(this).attr('src');
        
        var children = $('#phpoto dl dt img').getElemet(prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;
        
        prev_next_img(children)
        
    });

代码基本上几章内容都用过,这里复制粘贴小小修改一下即可,然后完整部分就是


    //上一张
    $('#phpoto_big .big .left').click(function(){
        
        //先将login图片重置为默认
        $('#photo_big .big img').attr('src','images/loading.gif').css('top','224px').css('width','32px').css('height','32px');
        
        //做一个图片加载判断
        var current_img = new Image();
        
        $(current_img).bind('load',function(){
            $('#phpoto_big .big img').attr('src',current_img.src).css('top',0).css('width','100%').css('height','100%').opacity(0).animation({
                'attr' : 'o',
                'end' : 100,
                'time' : 50
            });
        });
        
        current_img.src = $(this).attr('src');
        
        var children = $('#phpoto dl dt img').getElemet(prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;
        
        prev_next_img(children)
        
    });
    
    //下一张
    $('#phpoto_big .big .right').click(function(){
        //先将login图片重置为默认
        $('#photo_big .big img').attr('src','images/loading.gif').css('top','224px').css('width','32px').css('height','32px');
        
        //做一个图片加载判断
        var current_img = new Image();
        
        $(current_img).bind('load',function(){
            $('#phpoto_big .big img').attr('src',current_img.src).css('top',0).css('width','100%').css('height','100%').opacity(0).animation({
                'attr' : 'o',
                'end' : 100,
                'time' : 50
            });
        });
        
        current_img.src = $(this).attr('src');
        var children = $('#phpoto dl dt img').getElemet(nextIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;
        
        prev_next_img(children)
    
    });

预览图:

  • 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