使用jQuery获取列表内图片尺寸时返回0该如何解决？

代码执行时机早于图片加载时机。浏览器解析HTML构建DOM树时，只会完成标签结构的初始化，不会等待外部图片资源下载完成，此时img标签的天然宽高还未被浏览器计算，所以调用width()、height()返回值为0。li属于DOM结构元素，DOM树构建完成后就可以直接读取尺寸，因此不会出现该问题。

• 方案1：监听窗口load事件，等待所有资源加载完成后执行逻辑

该方案会等待页面内所有图片、样式、字体等静态资源全部加载完成后再执行代码，适合需要批量处理所有列表图片的场景

// 替换原有逻辑，包裹在load事件回调内
$(window).on('load', function() {
  $("ul.company-list li img").each(function(index) {
    var imgHeight = $(this).height();
    var imgWidth = $(this).width();
    var imProp = imgWidth / imgHeight;
    console.log(imgHeight);
  });
});

• 方案2：给单个图片绑定load事件，加载完成后立即读取尺寸

该方案不需要等待所有页面资源加载，对应图片加载完成后就会触发逻辑，性能更优

$("ul.company-list li img").each(function(index) {
  // 图片已经加载完成的直接读尺寸，没加载完的等load事件触发后再读
  if (this.complete) {
    handleImgSize($(this))
  } else {
    $(this).on('load', function() {
      handleImgSize($(this))
    })
  }
})

// 封装尺寸处理逻辑
function handleImgSize($img) {
  var imgHeight = $img.height();
  var imgWidth = $img.width();
  var imProp = imgWidth / imgHeight;
  console.log(imgHeight);
}

• 方案3：预加载获取尺寸（适用于图片还未插入DOM的场景）

$("ul.company-list li img").each(function(index) {
  const src = $(this).attr('src')
  const tempImg = new Image()
  tempImg.src = src
  tempImg.onload = function() {
    // 此处可以直接拿到图片原始宽高，不需要等待DOM渲染
    console.log(this.height, this.width)
  }
})

内容的提问来源于stack exchange，提问作者Fernando Souza