《Yodu》预加载如何加载到自己需要的js内容

现在给网站做了一个load的加载效果，但是目前流行的应该是Skeleton Screen 骨架屏，这个原本是在苹果端app里制作的，然后有人自己移植到web端，常见h5架构页面，如饿了么、知乎、facebook、酷安，都有应用，那么我就很好奇了，到底是怎么做的，于是百度了一下。了解Skeleton Screen 骨架屏解释有下：简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载,渲染完成之后，在保留页面布局样式的前提...

这次我们来做上一张和下一张按钮，HTML部分直接贴出来，反正就是strong元素只是做个显示展示，不做操作，然后在他的顶部覆盖一层span元素，这个元素做操作层。效果图：html代码：div class=""> <div id="photo_masked"></div> <div id="photo_big"> <i class="photo_off"><span class="off">+&...

单独的图片预加载已经完成，这里我们为上一张和下一张图片预加载做个准备。主要就是先将上一张和下一张的大图同时加载，在同一个图片点击事件中（当某个图片被click后）。首先就是我们要获取到上一张和下一张的图片索引位置，再通过这个值计算后来锁定对应的图片。首先我们先获取当前图片父元素的父元素的索引位置，这里要先说名一下关系链：div----dl----dt----img//这里获取到的是dl元素，每个dl元素里面都有一个img，所以索引值是一样的 var children = this.parentNode.parentNode;获取到dl后我们要再得到这个元素在dl元素数组中的索引值，之前我...

预加载其实和延迟加载差不多，一样是使用一个自定义的html属性保存好正确的大图地址，然后当鼠标点击后将正确的大图地址替换给弹出的显示元素上。html部分：//这是弹窗显示部分 <div class=""> <div id="photo_masked"></div> <div id="photo_big"> <i class="photo_off"><span class="off">+&...