时间戳

首页 > 解决方案 > 仅在已加载图像后执行图像分析

javascript - 仅在已加载图像后执行图像分析

问题描述

我正在寻找一种为移动设备缩放网页图像的方法。我的做法是使用 JavaScript 存储每张图片的尺寸，如果用户的屏幕小于某个值，所有图片都会使用 JavaScript 调整大小。我的问题是以下函数未检测图像是否已加载，因此未加载图像的结果将为 0。我的问题是，如何实现检查，以便该函数仅在图像完全加载后才计算图像大小？我没有使用 jQuery。

function storeImageSizes() {
  isizes = [];
  imgs = document.getElementById('content').getElementsByTagName('img');
  for (var i = 0; i < imgs.length; i++) {
    isizes[i] = [
      window.getComputedStyle(imgs[i]).getPropertyValue('width').replace('px', '') * 1,
      window.getComputedStyle(imgs[i]).getPropertyValue('height').replace('px', '') * 1
    ];
  }
}

标签： javascriptimageonload

解决方案

您可以使用以下解决方案在图像已加载后执行图像分析：

document.querySelector('#image').addEventListener('load', storeImageSizes);

推荐阅读