• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

JS 预加载2

336 0

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

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

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

0
  • 本文分类:JavaScript
  • 本文标签:预加载上一张下一张图片
  • 流行热度:已超过 336 人围观了本文
  • 最后更新:2019年02月27日 - 23时59分52秒
  • 发布日期:2019年02月27日 - 23时57分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码