Question

我有一个包含100张图片的滑块，我想提取每张图片的height，因此我使用这样的内联onload事件（src由模板动态处理引擎，服务器端，那里没有问题）：

<img src="<%=i.imgPath%>" style="width: 100%; max-height: 100%" onload="
   var maxHeight = $(this).height();
   console.log(maxHeight)">

奇怪的是，只有大约一半的图像记录了正确height，如果我将javascript包装在setTimeout函数中，那么我可以看到我使用的图像日志越多正确的height，直到所有图像都记录正确的高度。所以我知道这与load事件的时间有关，但是不应该只在图像加载完毕后才会触发，因此一切都在那里？所以：
1）为什么会发生这种情况？ 2）Hos使它有用吗？

Answer 1

问题中的

javascript不会检查<img> height，而是从.height之一获取.getBoundingClientRect()的{{1}}属性父元素

<img>

将$(this).parents('.outWrap')[0].getBoundingClientRect()替换为this.naturalHeight

.getBoundingClientRect().height

提取图像尺寸时，加载事件不按预期工作

1 个答案: