首页 » JavaScript » JS 预加载2

最后更新于 2019年02月27日

单独的图片预加载已经完成,这里我们为上一张和下一张图片预加载做个准备。

主要就是先将上一张和下一张的大图同时加载,在同一个图片点击事件中(当某个图片被click后)。

首先就是我们要获取到上一张和下一张的图片索引位置,再通过这个值计算后来锁定对应的图片。

首先我们先获取当前图片父元素的父元素的索引位置,这里要先说名一下关系链:

div----dl----dt----img

//这里获取到的是dl元素,每个dl元素里面都有一个img,所以索引值是一样的
var children = this.parentNode.parentNode;

获取到dl后我们要再得到这个元素在dl元素数组中的索引值,之前我们写过一个函数index(),这个可以获取对于的索引值,于是

$(children).index()

获取到对于索引值后我们还要计算再得到需要的值,那么有下面几种情况:

  1. 当图片是第一张时,上一张图片要为最后一张,下一张就是索引值+1;
  2. 当图片是最后一张时,下一张要是第一张,上一张就是索引值-1;
  3. 正常情况,上一张是索引值-1,下一张是索引值+1;

那么做一个通用函数:

//获取某一个节点的上一个节点
function prevIndex(current,parent){
    var length = parent.children.length;
    if(current == 0) return lenght - 1;
    return current - 1;
}

//获取某一个节点的下一个节点
function nextIndex(current,parent){
    var length = parent.children.length;
    if(current == length -1) return 0;
    return current + 1;
}

//获得上一张和下一张的索引值
    var prev = prevIndex($(children).index(),children.parentNode);
        var next = nextIndex($(children).index(),children.parentNode);

children这个方法是获取当前元素下的子元素集合,不包括子元素下的子元素,也不会包含空白元素。

得到索引值后,我们再分别创建两个图片元素,也是new方法创建,然后再将对于图片元素的大图src地址获取到即可。

//创建用于储存预加载图片的元素
        
        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');

假设我们点击的是第3张图片,那么他的上一张p2big,下一张上p4big!

于是,装备工作已经完成!

  • 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