图片画廊JS方向判断代码首次加载不生效，刷新后正常

我一眼就看出问题所在了——首次访问时图片还没加载完成，你的JavaScript就已经执行了，这时候获取到的图片宽高是不准确的（甚至可能是0），导致方向判断逻辑失效；而刷新页面时，图片已经被浏览器缓存，加载速度极快，执行代码时图片尺寸已经就绪，所以能正常工作。

另外还要纠正你代码里的一个小错误：jQuery中并没有$(document).onload这个写法，这也是导致问题的原因之一。下面给你几个可行的解决方案：

方案1：等待所有资源加载完成后执行 #

使用$(window).load()事件，这个事件会在页面所有资源（包括图片、样式表等）加载完成后才触发，能确保获取到正确的图片尺寸：

$(window).on('load', function() {
  $('.gallery img').each(function() {
    const $img = $(this);
    // 优先用naturalWidth/naturalHeight获取图片原始尺寸，避免CSS缩放影响
    const width = $img[0].naturalWidth || $img.width();
    const height = $img[0].naturalHeight || $img.height();
    const ratio = width / height;
    $img.addClass(ratio < 1 ? 'portrait' : 'landscape');
  });
});

方案2：单独处理每个图片的加载事件（更健壮） #

如果你的页面存在动态加载的图片（比如AJAX加载、滚动加载），或者想更及时地处理图片，推荐给每个图片绑定load事件，同时处理已经缓存的图片（缓存图片不会触发load事件）：

// 封装处理图片方向的函数
function setImageOrientation($img) {
  const width = $img[0].naturalWidth || $img.width();
  const height = $img[0].naturalHeight || $img.height();
  const ratio = width / height;
  $img.addClass(ratio < 1 ? 'portrait' : 'landscape');
}

// 遍历所有画廊图片
$('.gallery img').each(function() {
  const $this = $(this);
  // 如果图片已经加载完成（缓存状态），直接处理
  if (this.complete) {
    setImageOrientation($this);
  } else {
    // 否则等待图片加载完成后处理
    $this.on('load', function() {
      setImageOrientation($this);
    });
  }
});

关键知识点解释 #

• naturalWidth和naturalHeight：这两个属性是图片元素的原生属性，能获取图片的原始像素尺寸，不受CSS样式（比如缩放、拉伸）的影响，比jQuery的width()/height()更准确。
• this.complete：用于判断图片是否已经加载完成，处理浏览器缓存的图片，避免这类图片因为不会触发load事件而被遗漏。

内容的提问来源于stack exchange，提问作者Hasan Kawaai Pikachu