页面首次加载图片获取高度为0

在某些特殊情况下需要页面加载的时候就获取到图片的高度,通过高度去做相关的操作,但是由于首次加载需要请求,图片还没完全加载回来的时候高度就显示为0

这个时候可以使用图片预加载,先保证图片加载回来了再进行下一步操作

具体操作如下：

1.new一个图片实例对象

const i = new Image()

2.给创建出来的图片对象的src赋值(img对象有src之后会自动请求图片资源,<img>标签同理)

i.src = '图片路径'

3.使用定时器定时获取图片的高度或者宽度：

        （1）如果值为0说明还没加载回来,不执行任何操作,让定时器再次执行

        （2）如果值不为0说明已经加载回来了,清除定时器,然后执行接下来的操作

示例代码：

let timer = ''
const i = new Image()
i.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666936809&t=77a5b58fd5e3d5571a35f45d5c064492'
timer = setInterval(() => {
    console.log(1);
    if (i.height) {
        clearInterval(timer)
        timer = null
        console.log('获取到了',i.height,i.width)
    }
},1)

首次加载打印了两次1,说明第一次图片没有加载完成,等到第二次才加载完成。

刷新页面之后只打印了一次1,因为之前已经加载过了,浏览器会有缓存。