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

Question

我正在寻找一种方法来扩展移动设备的网页图像。我的方法是使用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
    ];
  }
}

Answer 1

添加所有DOM元素加载时要调用的侦听器。即：

document.addEventListener("load", (function(){
   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
    ];
  }
})

Answer 2

你尝试过image.onload吗？ 另外，检查this answer了。它强调了image.onload的使用，也避免了浏览器缓存问题。

Answer 3

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

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

Answer 4

在window.load函数中调用storeImageSizes（）应该可以解决问题

$( window ).on( "load", function() { ... })

它基本上是在加载所有图像和完整页面时触发的事件。由于您希望在加载所有图像时运行该功能，因此您应该使用此事件。

请注意document.ready和window.load之间的区别。 document.ready在DOM准备就绪时运行，其中window.load在加载完整页面后运行，即images / iframes等。

从这里参考Simple example using Jquery