JQuery页面加载时图片缩放代码偶发失效，求技术解决方案

核心问题是代码执行时机太早：$(document).ready只保证DOM结构加载完成，但图片资源可能还在下载，这时候获取的图片宽高是不准确的（可能为0），导致判断逻辑偶尔失效。

下面是具体的修复方案：

方案一：等所有资源加载完成再执行 #

改用window.onload（或原生的load事件监听），它会在页面所有资源（包括图片、样式表等）都加载完成后触发：

window.addEventListener('load', function() {
  $(".img-product").each(function(index) {
    let h = $(this).height();
    let w = $(this).width();
    if (h >= 300) {
      $(this).removeClass("w-100");
      $(this).css({
        'width': 'auto',
        'margin-right': 'auto',
        'margin-left': 'auto'
      });
    }
  });
});

方案二：针对单张图片做加载监听 #

如果不想等所有图片加载完，可单独给每个图片绑定load事件，同时处理缓存图片的情况（缓存图片不会触发load事件）：

$(document).ready(function() {
  $(".img-product").each(function() {
    const $img = $(this);
    // 处理已缓存的图片
    if ($img[0].complete) {
      adjustImageSize($img);
    } else {
      // 监听图片加载完成事件
      $img.on('load', function() {
        adjustImageSize($img);
      });
    }
  });
});

// 抽离调整逻辑，复用性更强
function adjustImageSize($img) {
  let h = $img.height();
  let w = $img.width();
  if (h >= 300) {
    $img.removeClass("w-100");
    $img.css({
      'width': 'auto',
      'margin-right': 'auto',
      'margin-left': 'auto'
    });
  }
}

方案三：用图片原始尺寸判断（更精准） #

如果需要基于图片的真实原始尺寸判断，而非渲染后的尺寸，可以用原生属性naturalHeight和naturalWidth：

function adjustImageSize($img) {
  // 获取图片原始高度
  let h = $img[0].naturalHeight;
  let w = $img[0].naturalWidth;
  if (h >= 300) {
    $img.removeClass("w-100");
    $img.css({
      'width': 'auto',
      'margin-right': 'auto',
      'margin-left': 'auto'
    });
  }
}

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