更新于

JS 预加载2

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

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

主要就是先将上一张和下一张的大图同时加载,在同一个图片点击事件中(当某个图片被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!

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

暂无评论

Info
站点信息

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

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

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

布局

购买