移动端$(this).height()值为0，桌面端正常，仅首次加载触发问题

问题原因 #

核心问题是代码执行时机早于图片加载完成：

• 移动端首次加载时，图片还未完成下载和渲染，此时调用$(this).height()会返回0；
• 刷新页面时，图片已被浏览器缓存，加载速度远快于首次，代码执行时图片已渲染完成，因此能获取正确高度。

解决方案 #

• 等待所有资源加载完成后执行代码
  使用$(window).load()替代$(document).ready()，前者会在所有页面资源（包括图片、样式表等）加载完成后才触发：

  $(window).load(function() {
      var maxLaenge = 0;
      var minHoehe = 0;
      $(this).find(".img").each(function() {
          var imgLaenge = $(this).width();
          if (imgLaenge > maxLaenge) {
              maxLaenge = imgLaenge;
              minHoehe = $(this).height();
              console.log($(this));
          }
      });
  });
  

• 针对单张图片绑定加载事件
  仅在目标图片加载完成后计算尺寸，同时兼容缓存场景：

  var maxLaenge = 0;
  var minHoehe = 0;
  $(this).find(".img").each(function() {
      var $img = $(this);
      // 检查图片是否已缓存完成
      if ($img[0].complete) {
          calculateImgSize($img);
      } else {
          $img.on('load', function() {
              calculateImgSize($img);
          });
      }
  });
  
  function calculateImgSize($img) {
      var imgLaenge = $img.width();
      if (imgLaenge > maxLaenge) {
          maxLaenge = imgLaenge;
          minHoehe = $img.height();
          console.log($img);
      }
  }
  

• 给图片设置固定宽高（备选方案）
  如果图片尺寸固定，直接在HTML或CSS中为.img设置明确的width和height属性，这样即使图片未加载，也能获取预设的尺寸值。

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