在切图网项目切图中遇到的问题,页面打开自动用layer弹出一个带有图片的活动层,然而这样会产生一个bug,当图片没加载完就弹出layer层,那么会导致弹窗了,但是图片还没显示的情况,所以这个时候要有一个先后顺序,大概原理是用原生js(用原生js而不是jquery是可以不用等待jquery代码执行完,可以更加准确更效率)监听图片是否加载完,等待图片加载完后在执行弹窗代码,这样就不会导致bug了。
原生js图片加载完成后执行的代码亲测可用
<div class="double1212_pop" style="display: none;">
<div class="img" style="cursor: pointer;">
<img id="popimg" src="images/kc_pop_fc.png?1xxx1xxx" width="364"/>
</div>
</div>
js代码
document.querySelector('#popimg').addEventListener('load', function () {
layer.open({
type: 1,
title: '',
skin: 'layui-layer-double1212',
area: ['364px', 'auto'],
//shade:false,
shadeClose :true,
btn: false,
anim:0,
closeBtn :true ,
content: $('.double1212_pop'),
});
})
为了确保效果也可以给图片加个预加载效果,源于做长期做前端外包,我知道html5有个preload的用法,这是html5自带的规范,不过我试了好像没有多大作用,欢迎交流。
<link rel="preload" as="image" href="images/kc_pop_fc.png"/>
关注“qietuwang”微信公众号,获取一手干货内容推送
本文由切图网原创,转载请保留版权:
微信扫一扫二维码访问