上面代码 给图片动态添加高度是异步的,改善一下
时间: 2024-04-01 20:34:00 浏览: 43
可以使用图片加载完成后再获取图片高度并设置给图片容器的方式,这样可以避免图片高度获取不准确的问题。具体实现可以使用 `Image` 对象的 `onload` 事件来监听图片加载完成的时刻,然后在回调函数中获取图片高度并设置给图片容器。以下是示例代码:
```javascript
const imgContainer = document.querySelector('.img-container');
const imgSrc = 'https://example.com/image.jpg';
const img = new Image();
img.src = imgSrc;
img.onload = function() {
const imgHeight = img.height;
imgContainer.style.height = `${imgHeight}px`;
imgContainer.innerHTML = `<img src="${imgSrc}" alt="image">`;
}
```
这样做的好处是可以确保图片加载完成后再计算高度,避免了异步加载导致高度不准确的问题。
相关问题
上面代码 给图片动态添加高度是异步的,获取不到高度,改善一下
可以使用 `window.getComputedStyle()` 获取图片的实际高度,这样可以确保获取到的高度是最准确的。具体实现可以在图片加载完成后,在回调函数中使用 `window.getComputedStyle()` 获取图片的实际高度,然后将其设置给图片容器。以下是示例代码:
```javascript
const imgContainer = document.querySelector('.img-container');
const imgSrc = 'https://example.com/image.jpg';
const img = new Image();
img.src = imgSrc;
img.onload = function() {
const imgHeight = window.getComputedStyle(img).height;
imgContainer.style.height = imgHeight;
imgContainer.innerHTML = `<img src="${imgSrc}" alt="image">`;
}
```
这样做的好处是可以确保获取到的高度是最准确的,避免了异步加载导致高度不准确的问题。