JS预加载4

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

首先是添加页脚 ： 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)
    
    });

预览图：