Question

我的网站使用延迟加载，并且我编写了一些Javascript脚本，以使图像组保持相同的宽高比，无论用户的视口如何。

延迟加载库要求图像的src属性包含一个浅色图像，如下例所示：1 x 1像素的透明GIF。

<div class="image-art composition">
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="art/game/StanleyParable.jpg" width="264" height="264" />
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="art/game/TheBeginnersGuide.jpg" width="461" height="264" />
</div>

现在的问题是在$(document).ready上，此函数被调用：

function getOriginalImageSizes() {
  $(".image-art img").each(function(index) {
    originalImageSizes[index] = {
      width: $(this).width(),
      height: $(this).height()
    };
  });
}

出于某种晦涩的原因，有时我的图像返回1x1大小，有时返回其width / height属性中指定的实际大小。

最大的问题是，然后，我重新缩放的javascript代码根据此1像素大小调整了图像的大小，从而使延迟加载库将图像加载到了这些微小的<img>元素中，而不是显示它们的真实尺寸。

有人知道为什么$(this).width()返回src内容的宽度而不是<img>元素的宽度吗？根据此处的文档：https://api.jquery.com/width/，看来我的代码应该可以正常工作。

jQuery width（）方法返回不正确的值

0 个答案: