如何正确使用this？预加载获取图片尺寸并通过JS设置时遇问题

嘿，我完全懂你现在的困扰——想在图片加载前就获取并设置它们的宽高，结果因为this的指向没搞对，所有图片都被设成了同一个尺寸，太闹心了对吧？这其实是处理批量DOM元素时很常见的坑，我来帮你捋清楚问题出在哪，以及怎么解决。

为什么this会导致所有图片尺寸相同？ #

大概率是你在处理图片时，this的指向并没有落到当前操作的那张图片上，反而指向了全局对象（比如浏览器里的window），或者某个共用的上下文。举个典型的错误例子：

// 错误示范：this指向window，所有图片共用同一个width/height
function setAllImageSizes() {
  document.querySelectorAll('img').forEach(function() {
    this.style.width = `${this.width}px`; // 这里的this不是当前img！
    this.style.height = `${this.height}px`;
  });
}

在这个例子里，forEach的普通回调函数里的this默认指向window，自然拿不到单个图片的宽高，结果要么用了window的属性值（大概率不对），要么就是你之前不小心给某个全局变量赋值了，导致所有图片复用同一个值。

正确的解决思路：让每个图片的逻辑独立绑定 #

我们需要确保每张图片的宽高处理都是针对自身的，这里有两种靠谱的方式：

方式1：用预加载Image实例，明确绑定当前元素 #

创建一个新的Image对象预加载图片资源，这样能在不影响页面渲染的情况下拿到原图宽高，再把尺寸设置给页面上的img元素。关键是在遍历的时候用let/const绑定当前img，或者在回调里直接引用它：

const allImages = document.querySelectorAll('img');

allImages.forEach(img => {
  const preloader = new Image();
  preloader.src = img.src;

  // 处理图片已缓存的情况（避免load事件不触发）
  if (img.complete) {
    img.style.width = `${img.naturalWidth}px`;
    img.style.height = `${img.naturalHeight}px`;
    return;
  }

  preloader.onload = function() {
    // 这里的this指向预加载的preloader实例，拿到的是原图尺寸
    img.style.width = `${this.width}px`;
    img.style.height = `${this.height}px`;
  };
});

这里用img变量直接引用当前遍历到的图片元素，完全避开了this的歧义问题，逻辑更清晰。

方式2：直接给图片绑定事件，用参数传递当前元素 #

如果是想在图片自身加载完成时设置尺寸，可以用内联事件直接把当前元素传进处理函数，彻底绕开this的困惑：

<img src="image-1.jpg" onload="setImageSize(this)">
<img src="image-2.jpg" onload="setImageSize(this)">
<!-- 更多图片... -->

<script>
function setImageSize(currentImg) {
  // 直接用传入的currentImg操作，完全不用管this
  currentImg.style.width = `${currentImg.naturalWidth}px`;
  currentImg.style.height = `${currentImg.naturalHeight}px`;
}
</script>

这种方式特别直观，适合新手，完全不会有this指向的问题。

关键要点总结 #

• 处理批量图片时，一定要确保每个元素的逻辑是独立的，遍历过程中用let/const绑定当前元素，或者直接传递元素参数
• 如果非要用this，记得在回调函数里用箭头函数（箭头函数的this继承自外层作用域），或者用bind()手动绑定指向：

  allImages.forEach(function() {
    this.style.width = `${this.width}px`;
  }.bind(img)); // 手动把this绑定到当前img
  

• 别忘了处理图片缓存的情况，否则已加载的图片不会触发load事件，导致尺寸没被设置

内容的提问来源于stack exchange，提问作者rob.m