木灵鱼儿
阅读:1518
JS 预加载2
单独的图片预加载已经完成,这里我们为上一张和下一张图片预加载做个准备。
主要就是先将上一张和下一张的大图同时加载,在同一个图片点击事件中(当某个图片被click后)。
首先就是我们要获取到上一张和下一张的图片索引位置,再通过这个值计算后来锁定对应的图片。
首先我们先获取当前图片父元素的父元素的索引位置,这里要先说名一下关系链:
div----dl----dt----img
//这里获取到的是dl元素,每个dl元素里面都有一个img,所以索引值是一样的
var children = this.parentNode.parentNode;
获取到dl后我们要再得到这个元素在dl元素数组中的索引值,之前我们写过一个函数index(),这个可以获取对于的索引值,于是
$(children).index()
获取到对于索引值后我们还要计算再得到需要的值,那么有下面几种情况:
- 当图片是第一张时,上一张图片要为最后一张,下一张就是索引值+1;
- 当图片是最后一张时,下一张要是第一张,上一张就是索引值-1;
- 正常情况,上一张是索引值-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!
于是,装备工作已经完成!
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
高仿Skeleton Screen 骨架屏
现在给网站做了一个load的加载效果,但是目前流行的应该是Skeleton Screen 骨架屏,这个原本是在苹果端app里制作的,然后有人自己移植到web端,常见h5架构页面,如饿了么、知乎、facebook、酷安,都有应用,那么我就很好奇了,到底是怎么做的,于是百度了一下。了解Skeleton Screen 骨架屏解释有下:简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面,在等待页面加载,渲染完成之后,在保留页面布局样式的前提...

《Yodu》预加载如何加载到自己需要的js内容
主题开启预加载可以加快访问速度,但是在一些程度上还是有一些取舍,比如js中的window.onload事件,就会只运行一次,当你进入到下一个页面的收,window.onload里面执行的内容就完全停止了,甚至可以说没有了,有点像是,你吃着吃着突然就换了一个肚子,这样虽然吃的也多,但是不一样了啊,和原来的对不上了,所以我们还是要针对这种情况,让js代码再次运行,这就相当于换了个肚子,还要接上才能用。询问了下泽泽,他说《Yodu》的预加载在footer.php中,在if (isInitialLoad === false) {}中,具体如下图:我们可以看到在这个里面其实有很多if的判断语句,这...
