浏览器函数库

getContentDimensions 函数

getContentDimensions函数用于获取指定元素的内容区域尺寸（不包括padding、border和margin）。

参数

• elementId (string): 要获取尺寸的元素的ID。

返回值

• 返回一个包含width和height属性的对象，表示元素内容区域的宽度和高度；如果未找到元素或元素没有计算样式，则返回null。

获取元素内容尺寸

import { getContentDimensions } from 'sunrise-utils';
const elementId = 'myElement';
const dimensions = getContentDimensions(elementId);

if (dimensions) {
  console.log(`Content width: ${dimensions.width}px, Content height: ${dimensions.height}px`);
} else {
  console.error('Could not get dimensions for element with ID:', elementId);
}

注意事项

• 确保传入的elementId是页面上存在的元素ID。
• 函数依赖于getComputedStyle和getBoundingClientRect，它们可能不受隐藏元素的影响。
• 返回的尺寸不包括元素的边框和外边距。

版本历史

• 1.0.0: 初始版本

贡献者

• 朝阳 (@朝阳)

preloadAndCacheImages 函数

preloadAndCacheImages函数用于预加载并缓存一组图片的 Image 对象。该函数接收一组图片 URL 数组，并返回一个包含这些图片的HTMLImageElement数组的 Promise。

参数

• imageUrls (string[]): 一个包含图片 URL 的字符串数组。

返回值

• 返回一个 Promise 对象，该 Promise 将解析为一个HTMLImageElement数组，包含所有加载完成的图片元素。

使用函数预加载图片

import { preloadAndCacheImages } from 'sunrise-utils'
const imageUrls = [
  'url-to-image-1.jpg',
  'url-to-image-2.jpg'
  // ... 更多图片URL
]

preloadAndCacheImages(imageUrls)
  .then((images) => {
    // 所有图片已加载并缓存
    // 使用images数组，其中images是HTMLImageElement的数组
  })
  .catch((error) => {
    // 加载图片时发生错误
    console.error('Error preloading images:', error)
  })

注意事项

• 该函数返回的 Promise 会在所有图片加载完成时解析，如果任一图片加载失败，则 Promise 将被拒绝。
• 图片加载是异步的，确保在图片实际加载完成后再进行 DOM 操作或样式设置。
• 请确保传入的 URL 是有效的，否则图片可能无法加载。

版本历史

• 1.0.2: 发布版本

贡献者

• 朝阳 (@朝阳)