木灵鱼儿
阅读:1735
JS 预加载1
预加载其实和延迟加载差不多,一样是使用一个自定义的html属性保存好正确的大图地址,然后当鼠标点击后将正确的大图地址替换给弹出的显示元素上。
html部分:
//这是弹窗显示部分
<div class="">
<div id="photo_masked"></div>
<div id="photo_big">
<i class="photo_off"><span class="off">+</span></i>
<h2 id="photo_title">预加载图片</h2>
<div class="big">
<img src="images/loading.gif" alt="" class=""/>
</div>
</div>
</div>
这是html图片部分,大图自定义属性为bsrc
<img xsrc="images/p1.jpg" bsrc="images/p1_big.jpg" src="images/ph_login1.jpg" alt="" class="wait_load" />
弹窗部分,显示的img元素默认加载的是loading.gif过渡动画的一个动态图,很小。
css部分就不做多的介绍了,都没啥难点,会写都ok
然后js部分!
设置原理:
当图片被点击后,弹窗,先显示gif图片过渡,这时会有一个新建的img元素,这个元素用来加载大图,加载完毕后再将大图的地址给到弹窗里的img元素,这时再加一个透明度过渡的动画,以上就完成了。
那么,如何判断图片是否加载完毕呢?
创建的图片元素会有两个事件,一个是onload事件,一个是onerror事件,顾名思义,第一个是判断加载是否完成,第二个是加载失败,这样就好办了,我们只需要用事件判断一下即可。
但是由于ie浏览器的问题,判断加载的事件必须要在图片加载之前,于是这样写
//图片预加载
var photo = $('#photo_big');
var photo_masked = $('#photo_masked');
$('#photo dl dt img').click(function(){
photo.css('clip','auto').css('opacity','1').center().resize(function(){
if(photo.css('opacity') == '1'){
photo_masked.Masked();
};
});
photo_masked.css('display','block').Masked().animation({
'attr' : 'o',
'end' : 30,
'step' : 7
});
//大图片加载
//先创建一个元素用于保存大图
var temp_img = new Image();
//当大图加载完毕后
$(temp_img).bind('load',function(){
$('#photo_big .big img').attr('src',temp_img.src).css('top',0).css('width','100%').css('height','100%').opacity(0).animation({
'attr' : 'o',
'end' : 100
});
});
//让创建的图片元素加载大图,但是因为ie的问题,图片的onload事件必须在加载代码的前面,所以load事件在加载之前
temp_img.src = $(this).attr('bsrc');
});
$('#photo_big .photo_off').click(function(){
photo.css('clip','rect(0 0 0 0)').css('opacity','0');
photo_masked.animation({
'attr' : 'o',
'end' : 0,
'step' : 7,
'fn' : function(){
photo_masked.removeMasked();
}
});
//关闭后初始化大图图片
$('#photo_big .big img').attr('src','images/loading.gif').css('top','224px').css('width','32px').css('height','32px');
});
使用new Image()的方法创建一个图片元素,这个元素用于缓存之用,当图片加载完毕后,将大图的图片地址替换掉弹出的img图片地址,并且加上透明度的动画过渡,css的设置这个看个人css怎么写再怎么修改,然后加载部分就已经完成了。
初始化部分
当大图显示后,此时弹窗的img图片地址就是你点击的图片大图地址,但是当你换另外一张是,这时过渡会从上一张过渡到这一张,这样是不对的,有残留,这个时候我们需要再次把弹窗的img图片元素的src地址更换为gif图片地址,那么我们再off元素事件中加上初始化即可,上面代码部分已经写出来了。
预览图:
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
高仿Skeleton Screen 骨架屏
现在给网站做了一个load的加载效果,但是目前流行的应该是Skeleton Screen 骨架屏,这个原本是在苹果端app里制作的,然后有人自己移植到web端,常见h5架构页面,如饿了么、知乎、facebook、酷安,都有应用,那么我就很好奇了,到底是怎么做的,于是百度了一下。了解Skeleton Screen 骨架屏解释有下:简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面,在等待页面加载,渲染完成之后,在保留页面布局样式的前提...

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

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