2023年2月23日

原生js图片加载完成后执行的代码亲测可用


切图网项目切图中遇到的问题,页面打开自动用layer弹出一个带有图片的活动层,然而这样会产生一个bug,当图片没加载完就弹出layer层,那么会导致弹窗了,但是图片还没显示的情况,所以这个时候要有一个先后顺序,大概原理是用原生js(用原生js而不是jquery是可以不用等待jquery代码执行完,可以更加准确更效率)监听图片是否加载完,等待图片加载完后在执行弹窗代码,这样就不会导致bug了。

原生js图片加载完成后执行的代码亲测可用

原生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"/>

标签:, , ,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》