在切图网项目切图中遇到的问题，页面打开自动用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"/>

标签：js, layer, 加载, 图片