在前端开发中,经常需要对图片进行一些操作。但是有时候我们并不能立即获取到图片的宽高等信息。因为当图片还没加载完时,这些属性是无法获取的。如果我们不加处理直接进行操作,页面可能会出现布局错乱的问题。因此,在进行图片相关操作前,我们需要等待图片加载完成。
下面介绍几种实现方式。
1. 使用 onload 事件
onload 事件可以检测图片是否已经加载完成。我们可以通过监听该事件来实现等待图片加载完成后再进行后续操作。
示例代码如下:
---- ---------- ----------------------- -- -------- ----- ----- - -------------------------------- ------------ - ---------- - -- ----------------- - ---------
这种方式的缺点是只适用于单张图片的情况。如果需要加载多张图片,代码会变得非常冗长。
2. 使用 Promise
Promise 是 ES6 新增的特性,可以用于异步编程。我们可以将加载图片的过程封装成一个 Promise 对象,并在 Promise 执行成功后进行后续操作。
示例代码如下:
-------- -------------- - ------ --- ----------------- ------- -- - ----- --- - --- ------- ---------- - ---------- - ------------ - ----------- - ---------- - ---------- ------------ --- ---- ----- -- - - ----- - ------- - --- -- - -- ---- ----- ----- - -------------------------------- ----------------------------------------- -- - -- ----------------- --
这种方式的优点是可以适用于加载多张图片的情况,并且代码结构清晰。
3. 使用 IntersectionObserver
IntersectionObserver 是浏览器提供的 API,可以用于监听元素是否进入或离开视口。我们可以将图片放到一个容器中,通过 IntersectionObserver 来监听容器是否可见,从而确定图片是否已经加载完成。
示例代码如下:
---- ----------------- ---- ----------------------- -- ------ -------- ----- ----------- - -------------------------------------- ----- -------- - --- ------------------------------ --------- -- - --------------------- -- - -- ---------------------- - -- ----------------- -------------------------------- - -- -- ----------------------------- ---------
这种方式的优点是可以实现懒加载,延迟加载等高级效果,并且可以适用于多张图片的情况。
总结
以上是几种实现等待图片加载完成的方式。在实际应用中,需要根据具体情况选择合适的方式。同时,还需要注意性能问题,尽量避免对页面性能造成影响。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/31706